gitadmin/admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

CoreUI-React initial commit v2.0.0-alpha.1

Browse Source
This commit is contained in:
xidedix 2018-03-13 17:36:17 +01:00
parent d1c1987014
commit 28669bed46
107 changed files with 15271 additions and 3478 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.babelrc
View File

@ -1,6 +0,0 @@
{
"presets": [
["react"], ["env"]
],
"plugins": ["transform-object-rest-spread"]
}

21
.gitignore vendored
View File

@ -1,19 +1,22 @@
# See http://help.github.com/ignore-files/ for more about ignoring files. # See https://help.github.com/ignore-files/ for more about ignoring files.
# dependencies # dependencies
node_modules /node_modules
package-lock.json
# testing # testing
coverage /coverage
# production # production
build /build
# misc # misc
.DS_Store .DS_Store
Thumbs.db
.env
.idea .idea
npm-debug.log .env.local
compilation-stats.json .env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*

6
CHANGELOG.md
View File

@ -1,5 +1,11 @@
## [react](./REACT.md) version `changelog` ## [react](./REACT.md) version `changelog`
##### `v2.0.0-alpha.1`
- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
- refactor: project structure change
- refactor: moved to [Create-React-App](CRA.md)
- chore: moved to [Semantic Versioning](https://semver.org/)
##### `v1.0.10` ##### `v1.0.10`
- refactor: `<InputGroupAddon addonType="prepend">` - refactor: `<InputGroupAddon addonType="prepend">`
- refactor: `<InputGroupAddon addonType="append">` - refactor: `<InputGroupAddon addonType="append">`

2434
CRA.md Normal file
View File

File diff suppressed because it is too large Load Diff

30
REACT.md
View File

@ -1,29 +1,31 @@
# React version # CoreUI React version
## Intro ## Intro
It uses Sass (with .scss). The style is loaded at the component level. This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
Dependencies can be handled by **npm**. It uses Sass (with .scss). The styles are loaded at the template level
Dependencies are handled by **npm**.
## Directories ## Directories
``` ```
React_Full_Project/ CoreUI-React#v2.0.0
├── src/ (js|jsx source)
├── scss/ (scss source)
├── public/ (html template) ├── public/ (html template)
├── img/ (images) ├── assets/ (static assets)
├── src/ (project root)
├── containers/ (container source)
├── scss/ (scss/css source)
├── views/ (views source)
``` ```
## Usage ## Usage
**npm i** - to install dependencies `npm i` - to install dependencies
## Sctipts ## Sctipts
**npm start** for developing (it runs webpack-dev-server) `npm start` for developing (it runs webpack-dev-server)
**npm run build** to run a dev build `npm run build` to run a dev build
**npm run clean** to clean build dir
**npm run dev** to run a dev build with watching filesystem for changes
## See also ## See also
[Create-React-App](CRA.md)
[Changelog](./CHANGELOG.md) [Changelog](./CHANGELOG.md)
[Readme](./README.md) [Readme](./README.md)

69
README.md
View File

@ -1,69 +0,0 @@
# CoreUI React - Free Bootstrap Admin Template [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20React%20Admin%20Template%20&url=http://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
### Check out our React Admin Templates and support CoreUI Development
[![Bootstrap Admin Templates Bundle](https://genesisui.com/img/bundle2.png)](https://genesisui.com/bundle.html?support=1)
[Check out React Admin Templates Bundle](https://genesisui.com/bundle.html?support=1)
This is React.js version of our Bootstrap 4 admin template [CoreUI](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) & [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
Why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Boostrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
CoreUI is an Open Source React & Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.
CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [HTML5 Static](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [AngularJS](https://github.com/mrholek/CoreUI-AngularJS), [Angular 2+](https://github.com/mrholek/CoreUI-Angular), [React.js](https://github.com/mrholek/CoreUI-React) & [Vue.js](https://github.com/mrholek/CoreUI-Vue).
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
[![CoreUI React Free Bootstrap Admin Template](http://coreui.io/assets/img/coreui.png "CoreUI React Free Bootstrap Admin Template")](http://coreui.io)
**NOTE:** Please remember to **STAR** this project and **FOLLOW** [my Github](https://github.com/mrholek) to keep you update with this template.
## Demo
A fully functional demo is available at [CoreUI](http://coreui.io/)
## What's included
Within the download you'll find the following directories and files, You'll see something like this:
```
CoreUI-React/
├── React_Full_Project/
├── React_Starter/
```
## Other Versions
CoreUI includes 6 Version for Angular 4, AngularJS, React.js, Vue.js, Static HTML5 and AJAX HTML5.
* [Angular Version (Angular 2+)](https://github.com/mrholek/CoreUI-Angular).
* [AngularJS Version](https://github.com/mrholek/CoreUI-AngularJS).
* [HTML5 AJAX Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
* [HTML5 Static Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
* [React.js Version](https://github.com/mrholek/CoreUI-React).
* [Vue.js Version](https://github.com/mrholek/CoreUI-Vue).
## Bugs and feature requests
Have a bug or a feature request? [Please open a new issue](https://github.com/mrholek/CoreUI-React/issues/new).
## Documentation
CoreUI's documentation, is hosted on our website [CoreUI](http://coreui.io/)
## Copyright and license
copyright 2017 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/mrholek/CoreUI-React/blob/master/LICENSE).
creativeLabs Łukasz Holeczek reserves the right to change the license of future releases. You can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI.
## Support CoreUI Development
CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on [PayPal](https://www.paypal.me/holeczek) or buying one of our [premium bootstrap 4 admin templates](https://genesisui.com/?support=1).
As of now I am exploring the possibility of working on CoreUI fulltime - if you are a business that is building core products using CoreUI, I am also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek).

74
package.json
View File

@ -1,57 +1,49 @@
{ {
"name": "@coreui/react", "name": "CoreUI-React",
"version": "1.0.10", "version": "2.0.0-alpha.1",
"description": "Open Source Bootstrap Admin Template", "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek", "copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
"license": "MIT", "license": "MIT",
"private": true, "private": true,
"devDependencies": { "repository": {
"babel-core": "6.26.0", "type": "git",
"babel-loader": "7.1.2", "url": "git@github.com:mrholek/CoreUI-React.git"
"babel-plugin-transform-object-rest-spread": "6.26.0",
"babel-preset-env": "1.6.1",
"babel-preset-react": "6.24.1",
"copy-webpack-plugin": "4.3.1",
"css-hot-loader": "1.3.6",
"css-loader": "0.28.9",
"extract-text-webpack-plugin": "3.0.2",
"file-loader": "1.1.6",
"html-loader": "0.5.5",
"html-webpack-plugin": "2.30.1",
"node-sass": "4.7.2",
"rimraf": "2.6.2",
"sass-loader": "6.0.6",
"source-list-map": "2.0.0",
"style-loader": "0.20.1",
"uglify-js": "3.3.9",
"url-loader": "0.6.2",
"webpack": "3.10.0",
"webpack-dev-server": "2.11.1"
}, },
"dependencies": { "dependencies": {
"@coreui/styles": "git://github.com/coreui/styles.git",
"@coreui/react-dev": "git://github.com/coreui/react.git",
"bootstrap": "4.0.0", "bootstrap": "4.0.0",
"chart.js": "2.7.1", "chart.js": "2.7.2",
"flag-icon-css": "2.9.0", "classnames": "^2.2.3",
"font-awesome": "4.7.0", "flag-icon-css": "3.0.0",
"history": "4.7.2", "font-awesome": "^4.7.0",
"react": "16.2.0", "node-sass-chokidar": "^1.1.0",
"prop-types": "^15.5.8",
"react": "^16.2.0",
"react-chartjs-2": "2.7.0", "react-chartjs-2": "2.7.0",
"react-dom": "16.2.0", "react-dom": "^16.2.0",
"react-router-dom": "4.2.2", "react-router-config": "^1.0.0-beta.4",
"react-transition-group": "2.2.1", "react-router-dom": "^4.2.2",
"react-scripts": "1.1.1",
"reactstrap": "5.0.0-beta", "reactstrap": "5.0.0-beta",
"simple-line-icons": "2.4.1" "simple-line-icons": "^2.4.1"
},
"devDependencies": {
"npm-run-all": "^4.1.2"
}, },
"scripts": { "scripts": {
"dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev", "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"start": "webpack-dev-server --progress --color --inline --env.dev", "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build": "webpack -p --progress --env.prod", "start-js": "react-scripts start",
"clean": "rimraf ./build" "start": "npm-run-all -p watch-css start-js",
"build-js": "react-scripts build",
"build": "npm-run-all build-css build-js",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}, },
"engines": { "bugs": {
"node": ">= 8.9.4", "url": "https://github.com/mrholek/CoreUI-React/issues"
"npm": ">= 5.6.0"
} }
} }

0
public/assets/.gitkeep Normal file
View File

0
public/img/avatars/1.jpg → public/assets/img/avatars/1.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

0
public/img/avatars/2.jpg → public/assets/img/avatars/2.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.1 KiB

After

Width:  |  Height:  |  Size: 2.1 KiB

0
public/img/avatars/3.jpg → public/assets/img/avatars/3.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
public/img/avatars/4.jpg → public/assets/img/avatars/4.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

0
public/img/avatars/5.jpg → public/assets/img/avatars/5.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

0
public/img/avatars/6.jpg → public/assets/img/avatars/6.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.6 KiB

0
public/img/avatars/7.jpg → public/assets/img/avatars/7.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 2.0 KiB

0
public/img/avatars/8.jpg → public/assets/img/avatars/8.jpg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 20 KiB

106
public/img/brand/logo.svg → public/assets/img/brand/logo.svg
View File

@ -1,53 +1,53 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve"> width="707.1px" height="200px" viewBox="0 0 707.1 200" style="enable-background:new 0 0 707.1 200;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:#1FA8D7;} .st0{fill:#1FA8D7;}
.st1{fill:#FFFFFF;} .st1{fill:#FFFFFF;}
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;} .st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;} .st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;} .st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
.st5{fill:#333333;} .st5{fill:#333333;}
.st6{fill:#1EA7D6;} .st6{fill:#1EA7D6;}
</style> </style>
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/> <polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 <polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
86.6,166.7 144.3,133.3 115.5,116.7 "/> 86.6,166.7 144.3,133.3 115.5,116.7 "/>
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/> <polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/> <polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/> <polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
<polygon class="st4" points="86.6,100 0,50 0,150 "/> <polygon class="st4" points="86.6,100 0,50 0,150 "/>
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/> <polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/> <polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
<g> <g>
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9 <path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20 c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5 c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6 c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8 c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3 c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1 c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
C289.3,127.4,289.9,127.3,290.4,127.3z"/> C289.3,127.4,289.9,127.3,290.4,127.3z"/>
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4 <path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8 c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4 c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8 c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8 C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4 c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4 c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/> c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9 <path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3 c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5 c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4 c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/> c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/> <path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7 <path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3 h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1 s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/> c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/> <path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

106
public/img/brand/sygnet.svg → public/assets/img/brand/sygnet.svg
View File

@ -1,53 +1,53 @@
<?xml version="1.0" encoding="utf-8"?> <?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --> <!-- Generator: Adobe Illustrator 17.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" <svg version="1.1" id="Warstwa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="173.2px" height="200px" viewBox="0 0 173.2 200" style="enable-background:new 0 0 173.2 200;" xml:space="preserve"> width="173.2px" height="200px" viewBox="0 0 173.2 200" style="enable-background:new 0 0 173.2 200;" xml:space="preserve">
<style type="text/css"> <style type="text/css">
.st0{fill:#1FA8D7;} .st0{fill:#1FA8D7;}
.st1{fill:#FFFFFF;} .st1{fill:#FFFFFF;}
.st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;} .st2{opacity:4.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;} .st3{opacity:8.000000e-02;stroke:#FFFFFF;stroke-miterlimit:10;}
.st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;} .st4{opacity:0;stroke:#FFFFFF;stroke-miterlimit:10;}
.st5{fill:#333333;} .st5{fill:#333333;}
.st6{fill:#1EA7D6;} .st6{fill:#1EA7D6;}
</style> </style>
<polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/> <polygon class="st0" points="0,150 0,50 86.6,0 173.2,50 173.2,150 86.6,200 "/>
<polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3 <polygon class="st1" points="86.6,133.3 57.7,116.7 57.7,83.3 86.6,66.7 115.5,83.3 144.3,66.7 86.6,33.3 28.9,66.7 28.9,133.3
86.6,166.7 144.3,133.3 115.5,116.7 "/> 86.6,166.7 144.3,133.3 115.5,116.7 "/>
<polygon class="st2" points="0,50 86.6,100 86.6,0 "/> <polygon class="st2" points="0,50 86.6,100 86.6,0 "/>
<polygon class="st2" points="0,150 86.6,200 86.6,100 "/> <polygon class="st2" points="0,150 86.6,200 86.6,100 "/>
<polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/> <polygon class="st3" points="86.6,100 173.2,150 173.2,50 "/>
<polygon class="st4" points="86.6,100 0,50 0,150 "/> <polygon class="st4" points="86.6,100 0,50 0,150 "/>
<polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/> <polygon class="st3" points="173.2,150 86.6,100 86.6,200 "/>
<polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/> <polygon class="st3" points="173.2,50 86.6,0 86.6,100 "/>
<g> <g>
<path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9 <path class="st5" d="M290.4,127.3c1,0,1.8,0.4,2.6,1.1l7.2,7.8c-4,4.9-8.8,8.7-14.6,11.3c-5.8,2.6-12.7,3.9-20.8,3.9
c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20 c-7.2,0-13.8-1.2-19.5-3.7c-5.8-2.5-10.7-5.9-14.8-10.3c-4.1-4.4-7.2-9.7-9.4-15.8c-2.2-6.1-3.3-12.8-3.3-20
c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5 c0-7.3,1.2-14.1,3.6-20.1c2.4-6.1,5.8-11.4,10.3-15.8c4.4-4.4,9.7-7.8,15.8-10.3c6.1-2.5,12.9-3.7,20.4-3.7c7.2,0,13.6,1.2,19,3.5
c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6 c5.4,2.3,10.1,5.4,13.9,9.2l-6.1,8.4c-0.4,0.5-0.8,1-1.4,1.4c-0.6,0.4-1.3,0.6-2.3,0.6c-1,0-2.1-0.4-3.2-1.2s-2.5-1.7-4.1-2.6
c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8 c-1.7-0.9-3.8-1.8-6.3-2.6c-2.5-0.8-5.8-1.2-9.7-1.2c-4.6,0-8.8,0.8-12.7,2.4c-3.8,1.6-7.2,3.9-9.9,6.9s-4.9,6.6-6.5,10.8
c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3 c-1.6,4.3-2.3,9-2.3,14.3c0,5.5,0.8,10.4,2.3,14.6c1.6,4.3,3.7,7.9,6.3,10.8c2.7,2.9,5.8,5.2,9.4,6.7c3.6,1.6,7.5,2.3,11.6,2.3
c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1 c2.5,0,4.7-0.1,6.7-0.4c2-0.3,3.8-0.7,5.5-1.3c1.7-0.6,3.3-1.3,4.8-2.3c1.5-0.9,3-2.1,4.5-3.4c0.4-0.4,0.9-0.7,1.4-1
C289.3,127.4,289.9,127.3,290.4,127.3z"/> C289.3,127.4,289.9,127.3,290.4,127.3z"/>
<path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4 <path class="st5" d="M407.5,101.5c0,7.2-1.2,13.8-3.6,19.9c-2.4,6.1-5.7,11.4-10.1,15.8c-4.3,4.5-9.5,7.9-15.6,10.4
c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8 c-6.1,2.5-12.8,3.7-20.2,3.7c-7.4,0-14.1-1.2-20.2-3.7c-6.1-2.5-11.3-6-15.7-10.4c-4.3-4.5-7.7-9.7-10.1-15.8
c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4 c-2.4-6.1-3.6-12.7-3.6-19.9c0-7.2,1.2-13.8,3.6-19.9c2.4-6.1,5.7-11.4,10.1-15.8c4.3-4.5,9.6-7.9,15.7-10.4
c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8 c6.1-2.5,12.8-3.7,20.2-3.7c7.4,0,14.1,1.3,20.2,3.8c6.1,2.5,11.3,6,15.6,10.4c4.3,4.4,7.7,9.7,10.1,15.8
C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8 C406.3,87.7,407.5,94.3,407.5,101.5z M388.9,101.5c0-5.4-0.7-10.2-2.1-14.4c-1.4-4.3-3.5-7.9-6.1-10.8c-2.7-3-5.9-5.2-9.7-6.8
c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4 c-3.8-1.6-8.1-2.4-12.9-2.4c-4.8,0-9.1,0.8-12.9,2.4c-3.8,1.6-7.1,3.8-9.8,6.8c-2.7,3-4.7,6.6-6.2,10.8c-1.4,4.3-2.2,9.1-2.2,14.4
c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4 c0,5.4,0.7,10.2,2.2,14.4c1.4,4.3,3.5,7.9,6.2,10.8c2.7,2.9,5.9,5.2,9.8,6.8c3.8,1.6,8.1,2.4,12.9,2.4c4.8,0,9.1-0.8,12.9-2.4
c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/> c3.8-1.6,7-3.8,9.7-6.8c2.7-2.9,4.7-6.5,6.1-10.8C388.2,111.7,388.9,106.9,388.9,101.5z"/>
<path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9 <path class="st5" d="M440.6,112.2v38.1h-18.2V52.7h29.8c6.7,0,12.4,0.7,17.1,2.1c4.7,1.4,8.6,3.3,11.7,5.8c3,2.5,5.3,5.4,6.7,8.9
c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3 c1.4,3.4,2.1,7.2,2.1,11.4c0,3.3-0.5,6.4-1.5,9.3c-1,2.9-2.4,5.6-4.2,8c-1.8,2.4-4.1,4.5-6.8,6.3c-2.7,1.8-5.7,3.2-9.1,4.3
c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5 c2.3,1.3,4.3,3.2,5.9,5.6l24.4,36h-16.3c-1.6,0-2.9-0.3-4-0.9c-1.1-0.6-2-1.5-2.8-2.7l-20.5-31.3c-0.8-1.2-1.6-2-2.5-2.5
c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4 c-0.9-0.5-2.3-0.7-4.1-0.7H440.6z M440.6,99.1h11.3c3.4,0,6.4-0.4,8.9-1.3c2.5-0.9,4.6-2,6.3-3.5c1.6-1.5,2.9-3.3,3.7-5.4
c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/> c0.8-2.1,1.2-4.3,1.2-6.8c0-4.9-1.6-8.8-4.9-11.4c-3.3-2.7-8.2-4-15-4h-11.6V99.1z"/>
<path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/> <path class="st5" d="M571.8,52.7v14.4h-43.3v27.1h34.1v14h-34.1v27.6h43.3v14.5h-61.6V52.7H571.8z"/>
<path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7 <path class="st6" d="M626.8,135.7c3.5,0,6.6-0.6,9.4-1.8c2.8-1.2,5.1-2.8,7-4.9c1.9-2.1,3.4-4.7,4.4-7.7c1-3,1.5-6.4,1.5-10.1V52.7
h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3 h18.2v58.5c0,5.8-0.9,11.2-2.8,16.1c-1.9,4.9-4.6,9.2-8.1,12.8c-3.5,3.6-7.8,6.4-12.8,8.4s-10.6,3-16.9,3s-11.9-1-16.9-3
s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1 s-9.2-4.8-12.7-8.4c-3.5-3.6-6.2-7.8-8-12.8c-1.9-4.9-2.8-10.3-2.8-16.1V52.7h18.2v58.4c0,3.7,0.5,7.1,1.5,10.1
c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/> c1,3,2.5,5.6,4.4,7.7c1.9,2.1,4.2,3.8,7,5C620.1,135.1,623.3,135.7,626.8,135.7z"/>
<path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/> <path class="st6" d="M706.2,150.3H688V52.7h18.2V150.3z"/>
</g> </g>
</svg> </svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 4.3 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

BIN
public/assets/img/favicon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.0 KiB

33
public/index.html
View File

@ -1,14 +1,28 @@
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="CoreUI - Open Source Bootstrap Admin Template"> <meta name="description" content="%THEMENAME% - %THEMEDESC%">
<meta name="author" content="Łukasz Holeczek"> <meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js"> <meta name="keyword" content="%THEMEKEYWORDS%">
<link rel="shortcut icon" href="img/favicon.png"> <title>%THEMENAME% - %THEMEDESC%</title>
<title>CoreUI - Open Source Bootstrap Admin Template</title> <!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
</head> </head>
<!-- BODY options, add following classes to body to change options <!-- BODY options, add following classes to body to change options
@ -39,7 +53,10 @@
--> -->
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden"> <body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div> <div id="root"></div>
<!-- <!--
This HTML file is a template. This HTML file is a template.
@ -48,8 +65,8 @@
You can add webfonts, meta tags, or analytics to this file. You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag. The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start`. To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build`. To create a production bundle, use `npm run build` or `yarn build`.
--> -->
</body> </body>
</html> </html>

15
public/manifest.json Normal file
View File

@ -0,0 +1,15 @@
{
"short_name": "CoreUI-React",
"name": "CoreUI-React sample",
"icons": [
{
"src": "./assets/favicon.png",
"sizes": "100x100",
"type": "image/png"
}
],
"start_url": "./index.html",
"display": "standalone",
"theme_color": "#000000",
"background_color": "#ffffff"
}

1
src/App.css Normal file
View File

@ -0,0 +1 @@

38
src/App.js Normal file
View File

@ -0,0 +1,38 @@
import React, { Component } from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
import './App.css';
// Styles
// Import Flag Icons Set
import 'flag-icon-css/css/flag-icon.min.css';
// Import Font Awesome Icons Set
import 'font-awesome/css/font-awesome.min.css';
// Import Simple Line Icons Set
import 'simple-line-icons/css/simple-line-icons.css';
// Import Main styles for this application
import './scss/style.css'
// import '../node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
// Containers
import { Full } from './containers';
// Pages
import { Login, Page404, Page500, Register } from './views/Pages';
// import { renderRoutes } from 'react-router-config';
class App extends Component {
render() {
return (
<HashRouter>
<Switch>
<Route exact path="/login" name="Login Page" component={Login} />
<Route exact path="/register" name="Register Page" component={Register} />
<Route exact path="/404" name="Page 404" component={Page404} />
<Route exact path="/500" name="Page 500" component={Page500} />
<Route path="/" name="Home" component={Full} />
</Switch>
</HashRouter>
);
}
}
export default App;

9
src/App.test.js Normal file
View File

@ -0,0 +1,9 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<App />, div);
ReactDOM.unmountComponentAtNode(div);
});

106
src/components/Sidebar/_nav.js → src/_nav.js
View File

@ -6,8 +6,8 @@ export default {
icon: 'icon-speedometer', icon: 'icon-speedometer',
badge: { badge: {
variant: 'info', variant: 'info',
text: 'NEW' text: 'NEW',
} },
}, },
{ {
title: true, title: true,
@ -33,7 +33,7 @@ export default {
name: 'Components', name: 'Components',
wrapper: { wrapper: {
element: '', element: '',
attributes: {} attributes: {},
}, },
}, },
{ {
@ -44,84 +44,84 @@ export default {
{ {
name: 'Breadcrumbs', name: 'Breadcrumbs',
url: '/base/breadcrumbs', url: '/base/breadcrumbs',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Cards', name: 'Cards',
url: '/base/cards', url: '/base/cards',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Carousels', name: 'Carousels',
url: '/base/carousels', url: '/base/carousels',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Collapses', name: 'Collapses',
url: '/base/collapses', url: '/base/collapses',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Dropdowns', name: 'Dropdowns',
url: '/base/dropdowns', url: '/base/dropdowns',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Forms', name: 'Forms',
url: '/base/forms', url: '/base/forms',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Jumbotrons', name: 'Jumbotrons',
url: '/base/jumbotrons', url: '/base/jumbotrons',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'List groups', name: 'List groups',
url: '/base/list-groups', url: '/base/list-groups',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Navs', name: 'Navs',
url: '/base/navs', url: '/base/navs',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Paginations', name: 'Paginations',
url: '/base/paginations', url: '/base/paginations',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Popovers', name: 'Popovers',
url: '/base/popovers', url: '/base/popovers',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Progress Bar', name: 'Progress Bar',
url: '/base/progress-bar', url: '/base/progress-bar',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Switches', name: 'Switches',
url: '/base/switches', url: '/base/switches',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Tables', name: 'Tables',
url: '/base/tables', url: '/base/tables',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Tabs', name: 'Tabs',
url: '/base/tabs', url: '/base/tabs',
icon: 'icon-puzzle' icon: 'icon-puzzle',
}, },
{ {
name: 'Tooltips', name: 'Tooltips',
url: '/base/tooltips', url: '/base/tooltips',
icon: 'icon-puzzle' icon: 'icon-puzzle',
} },
] ],
}, },
{ {
name: 'Buttons', name: 'Buttons',
@ -131,29 +131,29 @@ export default {
{ {
name: 'Buttons', name: 'Buttons',
url: '/buttons/buttons', url: '/buttons/buttons',
icon: 'icon-cursor' icon: 'icon-cursor',
}, },
{ {
name: 'Button dropdowns', name: 'Button dropdowns',
url: '/buttons/button-dropdowns', url: '/buttons/button-dropdowns',
icon: 'icon-cursor' icon: 'icon-cursor',
}, },
{ {
name: 'Button groups', name: 'Button groups',
url: '/buttons/button-groups', url: '/buttons/button-groups',
icon: 'icon-cursor' icon: 'icon-cursor',
}, },
{ {
name: 'Social Buttons', name: 'Social Buttons',
url: '/buttons/social-buttons', url: '/buttons/social-buttons',
icon: 'icon-cursor' icon: 'icon-cursor',
} },
] ],
}, },
{ {
name: 'Charts', name: 'Charts',
url: '/charts', url: '/charts',
icon: 'icon-pie-chart' icon: 'icon-pie-chart',
}, },
{ {
name: 'Icons', name: 'Icons',
@ -166,8 +166,8 @@ export default {
icon: 'icon-star', icon: 'icon-star',
badge: { badge: {
variant: 'success', variant: 'success',
text: 'NEW' text: 'NEW',
} },
}, },
{ {
name: 'Font Awesome', name: 'Font Awesome',
@ -175,15 +175,15 @@ export default {
icon: 'icon-star', icon: 'icon-star',
badge: { badge: {
variant: 'secondary', variant: 'secondary',
text: '4.7' text: '4.7',
} },
}, },
{ {
name: 'Simple Line Icons', name: 'Simple Line Icons',
url: '/icons/simple-line-icons', url: '/icons/simple-line-icons',
icon: 'icon-star' icon: 'icon-star',
} },
] ],
}, },
{ {
name: 'Notifications', name: 'Notifications',
@ -193,19 +193,19 @@ export default {
{ {
name: 'Alerts', name: 'Alerts',
url: '/notifications/alerts', url: '/notifications/alerts',
icon: 'icon-bell' icon: 'icon-bell',
}, },
{ {
name: 'Badges', name: 'Badges',
url: '/notifications/badges', url: '/notifications/badges',
icon: 'icon-bell' icon: 'icon-bell',
}, },
{ {
name: 'Modals', name: 'Modals',
url: '/notifications/modals', url: '/notifications/modals',
icon: 'icon-bell' icon: 'icon-bell',
}, },
] ],
}, },
{ {
name: 'Widgets', name: 'Widgets',
@ -213,15 +213,15 @@ export default {
icon: 'icon-calculator', icon: 'icon-calculator',
badge: { badge: {
variant: 'info', variant: 'info',
text: 'NEW' text: 'NEW',
} },
}, },
{ {
divider: true divider: true,
}, },
{ {
title: true, title: true,
name: 'Extras' name: 'Extras',
}, },
{ {
name: 'Pages', name: 'Pages',
@ -231,37 +231,37 @@ export default {
{ {
name: 'Login', name: 'Login',
url: '/login', url: '/login',
icon: 'icon-star' icon: 'icon-star',
}, },
{ {
name: 'Register', name: 'Register',
url: '/register', url: '/register',
icon: 'icon-star' icon: 'icon-star',
}, },
{ {
name: 'Error 404', name: 'Error 404',
url: '/404', url: '/404',
icon: 'icon-star' icon: 'icon-star',
}, },
{ {
name: 'Error 500', name: 'Error 500',
url: '/500', url: '/500',
icon: 'icon-star' icon: 'icon-star',
} },
] ],
}, },
{ {
name: 'Download CoreUI', name: 'Download CoreUI',
url: 'http://coreui.io/react/', url: 'http://coreui.io/react/',
icon: 'icon-cloud-download', icon: 'icon-cloud-download',
class: 'mt-auto', class: 'mt-auto',
variant: 'success' variant: 'success',
}, },
{ {
name: 'Try CoreUI PRO', name: 'Try CoreUI PRO',
url: 'http://coreui.io/pro/react/', url: 'http://coreui.io/pro/react/',
icon: 'icon-layers', icon: 'icon-layers',
variant: 'danger' variant: 'danger',
} },
] ],
}; };

6
src/components/Aside/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Aside",
"version": "0.0.0",
"private": true,
"main": "./Aside.js"
}

55
src/components/Breadcrumb/Breadcrumb.js
View File

@ -1,55 +0,0 @@
import React from 'react';
import {Route, Link} from 'react-router-dom';
import {Breadcrumb, BreadcrumbItem} from 'reactstrap';
import routes from '../../routes';
const findRouteName = url => routes[url];
const getPaths = (pathname) => {
const paths = ['/'];
if (pathname === '/') return paths;
pathname.split('/').reduce((prev, curr, index) => {
const currPath = `${prev}/${curr}`;
paths.push(currPath);
return currPath;
});
return paths;
};
const BreadcrumbsItem = ({...rest, match}) => {
const routeName = findRouteName(match.url);
if (routeName) {
return (
match.isExact ?
(
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
) :
(
<BreadcrumbItem>
<Link to={match.url || ''}>
{routeName}
</Link>
</BreadcrumbItem>
)
);
}
return null;
};
const Breadcrumbs = ({...rest, location : {pathname}, match}) => {
const paths = getPaths(pathname);
const items = paths.map((path, i) => <Route key={i++} path={path} component={BreadcrumbsItem}/>);
return (
<Breadcrumb>
{items}
</Breadcrumb>
);
};
export default props => (
<div>
<Route path="/:path" component={Breadcrumbs} {...props} />
</div>
);

6
src/components/Breadcrumb/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Breadcrumb",
"version": "0.0.0",
"private": true,
"main": "./Breadcrumb.js"
}

14
src/components/Footer/Footer.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class Footer extends Component {
render() {
return (
<footer className="app-footer">
<span><a href="http://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
<span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
</footer>
)
}
}
export default Footer;

6
src/components/Footer/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Footer",
"version": "0.0.0",
"private": true,
"main": "./Footer.js"
}

80
src/components/Header/Header.js
View File

@ -1,80 +0,0 @@
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
Nav,
NavbarBrand,
NavbarToggler,
NavItem,
NavLink,
Badge
} from 'reactstrap';
import HeaderDropdown from './HeaderDropdown';
class Header extends Component {
constructor(props) {
super(props);
}
sidebarToggle(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-hidden');
}
sidebarMinimize(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-minimized');
}
mobileSidebarToggle(e) {
e.preventDefault();
document.body.classList.toggle('sidebar-mobile-show');
}
asideToggle(e) {
e.preventDefault();
document.body.classList.toggle('aside-menu-hidden');
}
render() {
return (
<header className="app-header navbar">
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>
<span className="navbar-toggler-icon"></span>
</NavbarToggler>
<NavbarBrand href="#"></NavbarBrand>
<NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>
<span className="navbar-toggler-icon"></span>
</NavbarToggler>
<Nav className="d-md-down-none" navbar>
<NavItem className="px-3">
<NavLink href="#">Dashboard</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Users</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Settings</NavLink>
</NavItem>
</Nav>
<Nav className="ml-auto" navbar>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-list"></i></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
</NavItem>
<HeaderDropdown/>
</Nav>
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>
<span className="navbar-toggler-icon"></span>
</NavbarToggler>
</header>
);
}
}
export default Header;

60
src/components/Header/HeaderDropdown.js
View File

@ -1,60 +0,0 @@
import React, {Component} from 'react';
import {
Badge,
DropdownItem,
DropdownMenu,
DropdownToggle,
Dropdown
} from 'reactstrap';
class HeaderDropdown extends Component {
constructor(props) {
super(props);
this.toggle = this.toggle.bind(this);
this.state = {
dropdownOpen: false
};
}
toggle() {
this.setState({
dropdownOpen: !this.state.dropdownOpen
});
}
dropAccnt() {
return (
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
<DropdownToggle nav>
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
</DropdownToggle>
<DropdownMenu right>
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
<DropdownItem divider/>
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</Dropdown>
);
}
render() {
const {...attributes} = this.props;
return (
this.dropAccnt()
);
}
}
export default HeaderDropdown;

6
src/components/Header/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Header",
"version": "0.0.0",
"private": true,
"main": "./Header.js"
}

164
src/components/Sidebar/Sidebar.js
View File

@ -1,164 +0,0 @@
import React, {Component} from 'react';
import {NavLink} from 'react-router-dom';
import {Badge, Nav, NavItem, NavLink as RsNavLink} from 'reactstrap';
import classNames from 'classnames';
import nav from './_nav';
import SidebarFooter from './../SidebarFooter';
import SidebarForm from './../SidebarForm';
import SidebarHeader from './../SidebarHeader';
import SidebarMinimizer from './../SidebarMinimizer';
class Sidebar extends Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
this.activeRoute = this.activeRoute.bind(this);
this.hideMobile = this.hideMobile.bind(this);
}
handleClick(e) {
e.preventDefault();
e.target.parentElement.classList.toggle('open');
}
activeRoute(routeName, props) {
// return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
return props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
}
hideMobile() {
if (document.body.classList.contains('sidebar-mobile-show')) {
document.body.classList.toggle('sidebar-mobile-show')
}
}
// todo Sidebar nav secondLevel
// secondLevelActive(routeName) {
// return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse";
// }
render() {
const props = this.props;
// badge addon to NavItem
const badge = (badge) => {
if (badge) {
const classes = classNames( badge.class );
return (<Badge className={ classes } color={ badge.variant }>{ badge.text }</Badge>)
}
};
// simple wrapper for nav-title item
const wrapper = item => { return (item.wrapper && item.wrapper.element ? (React.createElement(item.wrapper.element, item.wrapper.attributes, item.name)): item.name ) };
// nav list section title
const title = (title, key) => {
const classes = classNames( 'nav-title', title.class);
return (<li key={key} className={ classes }>{wrapper(title)} </li>);
};
// nav list divider
const divider = (divider, key) => {
const classes = classNames( 'divider', divider.class);
return (<li key={key} className={ classes }></li>);
};
// nav label with nav link
const navLabel = (item, key) => {
const classes = {
item: classNames( 'hidden-cn', item.class ),
link: classNames( 'nav-label', item.class ? item.class : ''),
icon: classNames(
!item.icon ? 'fa fa-circle' : item.icon ,
item.label.variant ? `text-${item.label.variant}` : '',
item.label.class ? item.label.class : ''
)
};
return (
navLink(item, key, classes)
);
};
// nav item with nav link
const navItem = (item, key) => {
const classes = {
item: classNames( item.class) ,
link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
icon: classNames( item.icon )
};
return (
navLink(item, key, classes)
)
};
// nav link
const navLink = (item, key, classes) => {
const url = item.url ? item.url : '';
return (
<NavItem key={key} className={classes.item}>
{ isExternal(url) ?
<RsNavLink href={url} className={classes.link} active>
<i className={classes.icon}></i>{item.name}{badge(item.badge)}
</RsNavLink>
:
<NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile}>
<i className={classes.icon}></i>{item.name}{badge(item.badge)}
</NavLink>
}
</NavItem>
)
};
// nav dropdown
const navDropdown = (item, key) => {
return (
<li key={key} className={this.activeRoute(item.url, props)}>
<a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={item.icon}></i>{item.name}</a>
<ul className="nav-dropdown-items">
{navList(item.children)}
</ul>
</li>)
};
// nav type
const navType = (item, idx) =>
item.title ? title(item, idx) :
item.divider ? divider(item, idx) :
item.label ? navLabel(item, idx) :
item.children ? navDropdown(item, idx)
: navItem(item, idx) ;
// nav list
const navList = (items) => {
return items.map( (item, index) => navType(item, index) );
};
const isExternal = (url) => {
const link = url ? url.substring(0, 4) : '';
return link === 'http';
};
// sidebar-nav root
return (
<div className="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav className="sidebar-nav">
<Nav>
{navList(nav.items)}
</Nav>
</nav>
<SidebarFooter/>
<SidebarMinimizer/>
</div>
)
}
}
export default Sidebar;

6
src/components/Sidebar/package.json
View File

@ -1,6 +0,0 @@
{
"name": "Sidebar",
"version": "0.0.0",
"private": true,
"main": "./Sidebar.js"
}

14
src/components/SidebarFooter/SidebarFooter.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class SidebarFooter extends Component {
render() {
return null
// Uncomment following code lines to add Sidebar Footer
// return (
// <div className="sidebar-footer"></div>
// )
}
}
export default SidebarFooter;

6
src/components/SidebarFooter/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarFooter",
"version": "0.0.0",
"private": true,
"main": "./SidebarFooter.js"
}

14
src/components/SidebarForm/SidebarForm.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class SidebarForm extends Component {
render() {
return null
// Uncomment following code lines to add Sidebar Form
// return (
// <div className="sidebar-form"></div>
// )
}
}
export default SidebarForm;

6
src/components/SidebarForm/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarForm",
"version": "0.0.0",
"private": true,
"main": "./SidebarForm.js"
}

14
src/components/SidebarHeader/SidebarHeader.js
View File

@ -1,14 +0,0 @@
import React, {Component} from 'react';
class SidebarHeader extends Component {
render() {
return null
// Uncomment following code lines to add Sidebar Header
// return (
// <div className="sidebar-header"></div>
// )
}
}
export default SidebarHeader;

6
src/components/SidebarHeader/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarHeader",
"version": "0.0.0",
"private": true,
"main": "./SidebarHeader.js"
}

20
src/components/SidebarMinimizer/SidebarMinimizer.js
View File

@ -1,20 +0,0 @@
import React, {Component} from 'react';
class SidebarMinimizer extends Component {
sidebarMinimize() {
document.body.classList.toggle('sidebar-minimized');
}
brandMinimize() {
document.body.classList.toggle('brand-minimized');
}
render() {
return (
<button className="sidebar-minimizer" type="button" onClick={(event) => { this.sidebarMinimize(); this.brandMinimize() }}></button>
)
}
}
export default SidebarMinimizer;

6
src/components/SidebarMinimizer/package.json
View File

@ -1,6 +0,0 @@
{
"name": "SidebarMinimizer",
"version": "0.0.0",
"private": true,
"main": "./SidebarMinimizer.js"
}

143
src/containers/Full/Full.js
View File

@ -1,105 +1,72 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Switch, Route, Redirect} from 'react-router-dom'; import { Redirect, Route, Switch } from 'react-router-dom';
import {Container} from 'reactstrap'; import { Container } from 'reactstrap';
import Header from '../../components/Header/';
import Sidebar from '../../components/Sidebar/';
import Breadcrumb from '../../components/Breadcrumb/';
import Aside from '../../components/Aside/';
import Footer from '../../components/Footer/';
import Dashboard from '../../views/Dashboard/'; import {
AppAside,
import Colors from '../../views/Theme/Colors/'; AppBreadcrumb,
import Typography from '../../views/Theme/Typography/'; AppFooter,
AppHeader,
import Charts from '../../views/Charts/'; AppSidebar,
import Widgets from '../../views/Widgets/'; AppSidebarFooter,
AppSidebarForm,
// Base AppSidebarHeader,
import Cards from '../../views/Base/Cards/'; AppSidebarMinimizer,
import Forms from '../../views/Base/Forms/'; AppSidebarNav,
import Switches from '../../views/Base/Switches/'; } from '@coreui/react-dev';
import Tables from '../../views/Base/Tables/'; // sidebar nav config
import Tabs from '../../views/Base/Tabs/'; import navigation from '../../_nav';
import Breadcrumbs from '../../views/Base/Breadcrumbs/'; // routes config
import Carousels from '../../views/Base/Carousels/'; import routes from '../../routes';
import Collapses from '../../views/Base/Collapses/'; import FullAside from './FullAside';
import Dropdowns from '../../views/Base/Dropdowns/'; import FullFooter from './FullFooter';
import Jumbotrons from '../../views/Base/Jumbotrons/'; import FullHeader from './FullHeader';
import ListGroups from '../../views/Base/ListGroups/';
import Navbars from '../../views/Base/Navbars/';
import Navs from '../../views/Base/Navs/';
import Paginations from '../../views/Base/Paginations/';
import Popovers from '../../views/Base/Popovers/';
import ProgressBar from '../../views/Base/ProgressBar/';
import Tooltips from '../../views/Base/Tooltips/';
// Buttons
import Buttons from '../../views/Buttons/Buttons/';
import ButtonDropdowns from '../../views/Buttons/ButtonDropdowns/';
import ButtonGroups from '../../views/Buttons/ButtonGroups/';
import SocialButtons from '../../views/Buttons/SocialButtons/';
// Icons
import Flags from '../../views/Icons/Flags/';
import FontAwesome from '../../views/Icons/FontAwesome/';
import SimpleLineIcons from '../../views/Icons/SimpleLineIcons/';
// Notifications
import Alerts from '../../views/Notifications/Alerts/';
import Badges from '../../views/Notifications/Badges/';
import Modals from '../../views/Notifications/Modals/';
class Full extends Component { class Full extends Component {
render() { render() {
return ( return (
<div className="app"> <div className="app">
<Header/> <AppHeader fixed>
<FullHeader />
</AppHeader>
<div className="app-body"> <div className="app-body">
<Sidebar {...this.props}/> <AppSidebar fixed display="lg">
<AppSidebarHeader />
<AppSidebarForm />
<AppSidebarNav navConfig={navigation} {...this.props} />
<AppSidebarFooter />
<AppSidebarMinimizer />
</AppSidebar>
<main className="main"> <main className="main">
<Breadcrumb/> <AppBreadcrumb appRoutes={routes}>
<li class="breadcrumb-menu d-md-down-none">
<div class="btn-group" role="group" aria-label="Button group with nested dropdown">
<a class="btn" href="#"><i class="icon-speech"></i></a>
<a class="btn" href="/dashboard"><i class="icon-graph"></i> &nbsp;Dashboard</a>
<a class="btn" href="#"><i class="icon-settings"></i> &nbsp;Settings</a>
</div>
</li>
</AppBreadcrumb>
<Container fluid> <Container fluid>
<Switch> <Switch>
<Route path="/dashboard" name="Dashboard" component={Dashboard}/> {routes.map((route, idx) => {
<Route path="/theme/colors" name="Colors" component={Colors}/> return route.component ? (<Route key={idx} path={route.path} exact={route.exact} name={route.name} render={props => (
<Route path="/theme/typography" name="Typography" component={Typography}/> <route.component {...props} />
<Route path="/base/cards" name="Cards" component={Cards}/> )} />)
<Route path="/base/forms" name="Forms" component={Forms}/> : (null);
<Route path="/base/switches" name="Swithces" component={Switches}/> },
<Route path="/base/tables" name="Tables" component={Tables}/> )}
<Route path="/base/tabs" name="Tabs" component={Tabs}/> <Redirect from="/" to="/dashboard" />
<Route path="/base/breadcrumbs" name="Breadcrumbs" component={Breadcrumbs}/>
<Route path="/base/carousels" name="Carousels" component={Carousels}/>
<Route path="/base/collapses" name="Collapses" component={Collapses}/>
<Route path="/base/dropdowns" name="Dropdowns" component={Dropdowns}/>
<Route path="/base/jumbotrons" name="Jumbotrons" component={Jumbotrons}/>
<Route path="/base/list-groups" name="ListGroups" component={ListGroups}/>
<Route path="/base/navbars" name="Navbars" component={Navbars}/>
<Route path="/base/navs" name="Navs" component={Navs}/>
<Route path="/base/paginations" name="Paginations" component={Paginations}/>
<Route path="/base/popovers" name="Popovers" component={Popovers}/>
<Route path="/base/progress-bar" name="Progress Bar" component={ProgressBar}/>
<Route path="/base/tooltips" name="Tooltips" component={Tooltips}/>
<Route path="/buttons/buttons" name="Buttons" component={Buttons}/>
<Route path="/buttons/button-dropdowns" name="ButtonDropdowns" component={ButtonDropdowns}/>
<Route path="/buttons/button-groups" name="ButtonGroups" component={ButtonGroups}/>
<Route path="/buttons/social-buttons" name="Social Buttons" component={SocialButtons}/>
<Route path="/icons/flags" name="Flags" component={Flags}/>
<Route path="/icons/font-awesome" name="Font Awesome" component={FontAwesome}/>
<Route path="/icons/simple-line-icons" name="Simple Line Icons" component={SimpleLineIcons}/>
<Route path="/notifications/alerts" name="Alerts" component={Alerts}/>
<Route path="/notifications/badges" name="Badges" component={Badges}/>
<Route path="/notifications/modals" name="Modals" component={Modals}/>
<Route path="/widgets" name="Widgets" component={Widgets}/>
<Route path="/charts" name="Charts" component={Charts}/>
<Redirect from="/" to="/dashboard"/>
</Switch> </Switch>
</Container> </Container>
</main> </main>
<Aside/> <AppAside fixed hidden display="lg">
<FullAside />
</AppAside>
</div> </div>
<Footer/> <AppFooter fixed>
<FullFooter />
</AppFooter>
</div> </div>
); );
} }

130
src/components/Aside/Aside.js → src/containers/Full/FullAside.js
View File

@ -1,44 +1,61 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {TabContent, TabPane, Nav, NavItem, NavLink, Progress, Label, Input} from 'reactstrap'; import { Input, Label, Nav, NavItem, NavLink, Progress, TabContent, TabPane } from 'reactstrap';
import classnames from 'classnames'; import PropTypes from 'prop-types';
import classNames from 'classnames';
const propTypes = {
children: PropTypes.node,
};
const defaultProps = {};
class FullAside extends Component {
class Aside extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
activeTab: '1' activeTab: '1',
}; };
} }
toggle(tab) { toggle(tab) {
if (this.state.activeTab !== tab) { if (this.state.activeTab !== tab) {
this.setState({ this.setState({
activeTab: tab activeTab: tab,
}); });
} }
} }
render() { render() {
const { children, ...attributes } = this.props;
return ( return (
<aside className="aside-menu"> <React.Fragment>
<Nav tabs> <Nav tabs>
<NavItem> <NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '1' })} <NavLink className={classNames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }}> onClick={() => {
this.toggle('1');
}}>
<i className="icon-list"></i> <i className="icon-list"></i>
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '2' })} <NavLink className={classNames({ active: this.state.activeTab === '2' })}
onClick={() => { this.toggle('2'); }}> onClick={() => {
this.toggle('2');
}}>
<i className="icon-speech"></i> <i className="icon-speech"></i>
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
<NavLink className={classnames({ active: this.state.activeTab === '3' })} <NavLink className={classNames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }}> onClick={() => {
this.toggle('3');
}}>
<i className="icon-settings"></i> <i className="icon-settings"></i>
</NavLink> </NavLink>
</NavItem> </NavItem>
@ -48,93 +65,93 @@ class Aside extends Component {
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase"> <div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Today</b></small> <small><b>Today</b></small>
</div> </div>
<hr className="transparent mx-3 my-0"/> <hr className="transparent mx-3 my-0" />
<div className="callout callout-warning m-0 py-3"> <div className="callout callout-warning m-0 py-3">
<div className="avatar float-right"> <div className="avatar float-right">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div>Meeting with <strong>Lucas</strong></div> <div>Meeting with <strong>Lucas</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small> <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small> <small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
</div> </div>
<hr className="mx-3 my-0"/> <hr className="mx-3 my-0" />
<div className="callout callout-info m-0 py-3"> <div className="callout callout-info m-0 py-3">
<div className="avatar float-right"> <div className="avatar float-right">
<img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div>Skype with <strong>Megan</strong></div> <div>Skype with <strong>Megan</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 5pm</small> <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 5pm</small>
<small className="text-muted"><i className="icon-social-skype"></i>&nbsp; On-line</small> <small className="text-muted"><i className="icon-social-skype"></i>&nbsp; On-line</small>
</div> </div>
<hr className="transparent mx-3 my-0"/> <hr className="transparent mx-3 my-0" />
<div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase"> <div className="callout m-0 py-2 text-muted text-center bg-light text-uppercase">
<small><b>Tomorrow</b></small> <small><b>Tomorrow</b></small>
</div> </div>
<hr className="transparent mx-3 my-0"/> <hr className="transparent mx-3 my-0" />
<div className="callout callout-danger m-0 py-3"> <div className="callout callout-danger m-0 py-3">
<div>New UI Project - <strong>deadline</strong></div> <div>New UI Project - <strong>deadline</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small> <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 10 - 11pm</small>
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small> <small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
<div className="avatars-stack mt-2"> <div className="avatars-stack mt-2">
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
</div> </div>
</div> </div>
<hr className="mx-3 my-0"/> <hr className="mx-3 my-0" />
<div className="callout callout-success m-0 py-3"> <div className="callout callout-success m-0 py-3">
<div><strong>#10 Startups.Garden</strong> Meetup</div> <div><strong>#10 Startups.Garden</strong> Meetup</div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small> <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 1 - 3pm</small>
<small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small> <small className="text-muted"><i className="icon-location-pin"></i>&nbsp; Palo Alto, CA</small>
</div> </div>
<hr className="mx-3 my-0"/> <hr className="mx-3 my-0" />
<div className="callout callout-primary m-0 py-3"> <div className="callout callout-primary m-0 py-3">
<div><strong>Team meeting</strong></div> <div><strong>Team meeting</strong></div>
<small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small> <small className="text-muted mr-3"><i className="icon-calendar"></i>&nbsp; 4 - 6pm</small>
<small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small> <small className="text-muted"><i className="icon-home"></i>&nbsp; creativeLabs HQ</small>
<div className="avatars-stack mt-2"> <div className="avatars-stack mt-2">
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/2.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/3.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/4.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/5.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
<div className="avatar avatar-xs"> <div className="avatar avatar-xs">
<img src={'img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/8.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</div> </div>
</div> </div>
</div> </div>
<hr className="mx-3 my-0"/> <hr className="mx-3 my-0" />
</TabPane> </TabPane>
<TabPane tabId="2" className="p-3"> <TabPane tabId="2" className="p-3">
<div className="message"> <div className="message">
<div className="py-3 pb-5 mr-3 float-left"> <div className="py-3 pb-5 mr-3 float-left">
<div className="avatar"> <div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span> <span className="avatar-status badge-success"></span>
</div> </div>
</div> </div>
@ -147,11 +164,11 @@ class Aside extends Component {
tempor incididunt... tempor incididunt...
</small> </small>
</div> </div>
<hr/> <hr />
<div className="message"> <div className="message">
<div className="py-3 pb-5 mr-3 float-left"> <div className="py-3 pb-5 mr-3 float-left">
<div className="avatar"> <div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span> <span className="avatar-status badge-success"></span>
</div> </div>
</div> </div>
@ -164,11 +181,11 @@ class Aside extends Component {
tempor incididunt... tempor incididunt...
</small> </small>
</div> </div>
<hr/> <hr />
<div className="message"> <div className="message">
<div className="py-3 pb-5 mr-3 float-left"> <div className="py-3 pb-5 mr-3 float-left">
<div className="avatar"> <div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span> <span className="avatar-status badge-success"></span>
</div> </div>
</div> </div>
@ -181,11 +198,11 @@ class Aside extends Component {
tempor incididunt... tempor incididunt...
</small> </small>
</div> </div>
<hr/> <hr />
<div className="message"> <div className="message">
<div className="py-3 pb-5 mr-3 float-left"> <div className="py-3 pb-5 mr-3 float-left">
<div className="avatar"> <div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span> <span className="avatar-status badge-success"></span>
</div> </div>
</div> </div>
@ -198,11 +215,11 @@ class Aside extends Component {
tempor incididunt... tempor incididunt...
</small> </small>
</div> </div>
<hr/> <hr />
<div className="message"> <div className="message">
<div className="py-3 pb-5 mr-3 float-left"> <div className="py-3 pb-5 mr-3 float-left">
<div className="avatar"> <div className="avatar">
<img src={'img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/> <img src={'assets/img/avatars/7.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
<span className="avatar-status badge-success"></span> <span className="avatar-status badge-success"></span>
</div> </div>
</div> </div>
@ -223,7 +240,7 @@ class Aside extends Component {
<div className="clearfix mt-4"> <div className="clearfix mt-4">
<small><b>Option 1</b></small> <small><b>Option 1</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -239,7 +256,7 @@ class Aside extends Component {
<div className="clearfix mt-3"> <div className="clearfix mt-3">
<small><b>Option 2</b></small> <small><b>Option 2</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input"/> <Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -255,7 +272,7 @@ class Aside extends Component {
<div className="clearfix mt-3"> <div className="clearfix mt-3">
<small><b>Option 3</b></small> <small><b>Option 3</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input"/> <Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -266,44 +283,47 @@ class Aside extends Component {
<div className="clearfix mt-3"> <div className="clearfix mt-3">
<small><b>Option 4</b></small> <small><b>Option 4</b></small>
<Label className="switch switch-text switch-pill switch-success switch-sm float-right"> <Label className="switch switch-text switch-pill switch-success switch-sm float-right">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
</div> </div>
</div> </div>
<hr/> <hr />
<h6>System Utilization</h6> <h6>System Utilization</h6>
<div className="text-uppercase mb-1 mt-4"> <div className="text-uppercase mb-1 mt-4">
<small><b>CPU Usage</b></small> <small><b>CPU Usage</b></small>
</div> </div>
<Progress className="progress-xs" color="info" value="25"/> <Progress className="progress-xs" color="info" value="25" />
<small className="text-muted">348 Processes. 1/4 Cores.</small> <small className="text-muted">348 Processes. 1/4 Cores.</small>
<div className="text-uppercase mb-1 mt-2"> <div className="text-uppercase mb-1 mt-2">
<small><b>Memory Usage</b></small> <small><b>Memory Usage</b></small>
</div> </div>
<Progress className="progress-xs" color="warning" value="70"/> <Progress className="progress-xs" color="warning" value="70" />
<small className="text-muted">11444GB/16384MB</small> <small className="text-muted">11444GB/16384MB</small>
<div className="text-uppercase mb-1 mt-2"> <div className="text-uppercase mb-1 mt-2">
<small><b>SSD 1 Usage</b></small> <small><b>SSD 1 Usage</b></small>
</div> </div>
<Progress className="progress-xs" color="danger" value="95"/> <Progress className="progress-xs" color="danger" value="95" />
<small className="text-muted">243GB/256GB</small> <small className="text-muted">243GB/256GB</small>
<div className="text-uppercase mb-1 mt-2"> <div className="text-uppercase mb-1 mt-2">
<small><b>SSD 2 Usage</b></small> <small><b>SSD 2 Usage</b></small>
</div> </div>
<Progress className="progress-xs" color="success" value="10"/> <Progress className="progress-xs" color="success" value="10" />
<small className="text-muted">25GB/256GB</small> <small className="text-muted">25GB/256GB</small>
</TabPane> </TabPane>
</TabContent> </TabContent>
</aside> </React.Fragment>
) );
} }
} }
export default Aside; FullAside.propTypes = propTypes;
FullAside.defaultProps = defaultProps;
export default FullAside;

27
src/containers/Full/FullFooter.js Normal file
View File

@ -0,0 +1,27 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
const propTypes = {
children: PropTypes.node,
};
const defaultProps = {};
class FullFooter extends Component {
render() {
const { children, ...attributes } = this.props;
return (
<React.Fragment>
<span><a href="https://coreui.io">CoreUI</a> &copy; 2018 creativeLabs.</span>
<span className="ml-auto">Powered by <a href="https://coreui.io/react">CoreUI for React</a></span>
</React.Fragment>
);
}
}
FullFooter.propTypes = propTypes;
FullFooter.defaultProps = defaultProps;
export default FullFooter;

79
src/containers/Full/FullHeader.js Normal file
View File

@ -0,0 +1,79 @@
import React, { Component } from 'react';
import { Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
import PropTypes from 'prop-types';
import { AppAsideToggler, AppHeaderDropdown, AppNavbarBrand, AppSidebarToggler } from '@coreui/react-dev';
const propTypes = {
children: PropTypes.node,
};
const defaultProps = {};
class FullHeader extends Component {
render() {
const { children, ...attributes } = this.props;
return (
<React.Fragment>
<AppSidebarToggler className="d-lg-none" display="md" mobile />
<AppNavbarBrand
full={{ src: process.env.PUBLIC_URL + 'assets/img/brand/logo.svg', width: 89, height: 25, alt: 'CoreUI Logo' }}
minimized={{ src: process.env.PUBLIC_URL + 'assets/img/brand/sygnet.svg', width: 30, height: 30, alt: 'CoreUI Logo' }}
/>
<AppSidebarToggler className="d-md-down-none" display="lg" />
<Nav className="d-md-down-none" navbar>
<NavItem className="px-3">
<NavLink href="/">Dashboard</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Users</NavLink>
</NavItem>
<NavItem className="px-3">
<NavLink href="#">Settings</NavLink>
</NavItem>
</Nav>
<Nav className="ml-auto" navbar>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-list"></i></NavLink>
</NavItem>
<NavItem className="d-md-down-none">
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
</NavItem>
<AppHeaderDropdown>
<DropdownToggle nav>
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</DropdownToggle>
<DropdownMenu right style={{ right: 'auto' }}>
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
<DropdownItem divider />
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
</DropdownMenu>
</AppHeaderDropdown>
</Nav>
<AppAsideToggler className="d-md-down-none" />
<AppAsideToggler className="d-lg-none" mobile />
</React.Fragment>
);
}
}
FullHeader.propTypes = propTypes;
FullHeader.defaultProps = defaultProps;
export default FullHeader;

3
src/containers/index.js Normal file
View File

@ -0,0 +1,3 @@
import Full from './Full';
export { Full };

1
src/index.css Normal file
View File

@ -0,0 +1 @@

38
src/index.js
View File

@ -1,36 +1,8 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import {HashRouter, Route, Switch} from 'react-router-dom'; import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
// Styles ReactDOM.render(<App />, document.getElementById('root'));
// Import Flag Icons Set registerServiceWorker();
import 'flag-icon-css/css/flag-icon.min.css';
// Import Font Awesome Icons Set
import 'font-awesome/css/font-awesome.min.css';
// Import Simple Line Icons Set
import 'simple-line-icons/css/simple-line-icons.css';
// Import Main styles for this application
import '../scss/style.scss'
// Temp fix for reactstrap
import '../scss/core/_dropdown-menu-right.scss'
// Containers
import Full from './containers/Full/'
// Views
import Login from './views/Pages/Login/'
import Register from './views/Pages/Register/'
import Page404 from './views/Pages/Page404/'
import Page500 from './views/Pages/Page500/'
ReactDOM.render((
<HashRouter>
<Switch>
<Route exact path="/login" name="Login Page" component={Login}/>
<Route exact path="/register" name="Register Page" component={Register}/>
<Route exact path="/404" name="Page 404" component={Page404}/>
<Route exact path="/500" name="Page 500" component={Page500}/>
<Route path="/" name="Home" component={Full}/>
</Switch>
</HashRouter>
), document.getElementById('root'));

117
src/registerServiceWorker.js Normal file
View File

@ -0,0 +1,117 @@
// In production, we register a service worker to serve assets from local cache.
// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.
// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.
const isLocalhost = Boolean(
window.location.hostname === 'localhost' ||
// [::1] is the IPv6 localhost address.
window.location.hostname === '[::1]' ||
// 127.0.0.1/8 is considered localhost for IPv4.
window.location.hostname.match(
/^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
)
);
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
// The URL constructor is available in all browsers that support SW.
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
// Our service worker won't work if PUBLIC_URL is on a different origin
// from what our page is served on. This might happen if a CDN is used to
// serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
// This is running on localhost. Lets check if a service worker still exists or not.
checkValidServiceWorker(swUrl);
// Add some additional logging to localhost, pointing developers to the
// service worker/PWA documentation.
navigator.serviceWorker.ready.then(() => {
console.log(
'This web app is being served cache-first by a service ' +
'worker. To learn more, visit https://goo.gl/SC7cgQ'
);
});
} else {
// Is not local host. Just register service worker
registerValidSW(swUrl);
}
});
}
}
function registerValidSW(swUrl) {
navigator.serviceWorker
.register(swUrl)
.then(registration => {
registration.onupdatefound = () => {
const installingWorker = registration.installing;
installingWorker.onstatechange = () => {
if (installingWorker.state === 'installed') {
if (navigator.serviceWorker.controller) {
// At this point, the old content will have been purged and
// the fresh content will have been added to the cache.
// It's the perfect time to display a "New content is
// available; please refresh." message in your web app.
console.log('New content is available; please refresh.');
} else {
// At this point, everything has been precached.
// It's the perfect time to display a
// "Content is cached for offline use." message.
console.log('Content is cached for offline use.');
}
}
};
};
})
.catch(error => {
console.error('Error during service worker registration:', error);
});
}
function checkValidServiceWorker(swUrl) {
// Check if the service worker can be found. If it can't reload the page.
fetch(swUrl)
.then(response => {
// Ensure service worker exists, and that we really are getting a JS file.
if (
response.status === 404 ||
response.headers.get('content-type').indexOf('javascript') === -1
) {
// No service worker found. Probably a different app. Reload the page.
navigator.serviceWorker.ready.then(registration => {
registration.unregister().then(() => {
window.location.reload();
});
});
} else {
// Service worker found. Proceed as normal.
registerValidSW(swUrl);
}
})
.catch(() => {
console.log(
'No internet connection found. App is running in offline mode.'
);
});
}
export function unregister() {
if ('serviceWorker' in navigator) {
navigator.serviceWorker.ready.then(registration => {
registration.unregister();
});
}
}

119
src/routes.js
View File

@ -1,40 +1,79 @@
const routes = { import {
'/': 'Home', Alerts,
'/base': 'Base', Badges,
'/base/cards': 'Cards', Breadcrumbs,
'/base/forms': 'Forms', ButtonDropdowns,
'/base/switches': 'Switches', ButtonGroups,
'/base/tables': 'Tables', Buttons,
'/base/tabs': 'Tabs', Cards,
'/base/breadcrumbs': 'Breadcrumbs', Carousels,
'/base/carousels': 'Carousels', Charts,
'/base/collapses': 'Collapses', Collapses,
'/base/jumbotrons': 'Jumbotrons', Colors,
'/base/list-groups': 'List Groups', Dashboard,
'/base/navbars': 'Navbars', Dropdowns,
'/base/navs': 'Navs', Flags,
'/base/paginations': 'Paginations', FontAwesome,
'/base/popovers': 'Popovers', Forms,
'/base/progress-bar': 'Progress Bar', Jumbotrons,
'/base/tooltips': 'Tooltips', ListGroups,
'/buttons': 'Buttons', Modals,
'/buttons/buttons': 'Buttons', Navbars,
'/buttons/social-buttons': 'Social Buttons', Navs,
'/buttons/button-dropdowns': 'Button Dropdowns', Paginations,
'/buttons/button-groups': 'Button Groups', Popovers,
'/charts': 'Charts', ProgressBar,
'/dashboard': 'Dashboard', SimpleLineIcons,
'/icons': 'Icons', SocialButtons,
'/icons/flags': 'Flags', Switches,
'/icons/font-awesome': 'Font Awesome', Tables,
'/icons/simple-line-icons': 'Simple Line Icons', Tabs,
'/notifications': 'Notifications', Tooltips,
'/notifications/alerts': 'Alerts', Typography,
'/notifications/badges': 'Badges', Widgets,
'/notifications/modals': 'Modals', } from './views';
'/theme': 'Theme', import Full from './containers/Full';
'/theme/colors': 'Colors',
'/theme/typography': 'Typography', // https://github.com/ReactTraining/react-router/tree/master/packages/react-router-config
'/widgets': 'Widgets' const routes = [
}; { path: '/', exact: true, name: 'Home', component: Full },
export default routes; { path: '/dashboard', name: 'Dashboard', component: Dashboard },
{ path: '/theme', exact: true, name: 'Theme', component: Colors },
{ path: '/theme/colors', name: 'Colors', component: Colors },
{ path: '/theme/typography', name: 'Typography', component: Typography },
{ path: '/base', exact: true, name: 'Base', component: Cards },
{ path: '/base/cards', name: 'Cards', component: Cards },
{ path: '/base/forms', name: 'Forms', component: Forms },
{ path: '/base/switches', name: 'Swithces', component: Switches },
{ path: '/base/tables', name: 'Tables', component: Tables },
{ path: '/base/tabs', name: 'Tabs', component: Tabs },
{ path: '/base/breadcrumbs', name: 'Breadcrumbs', component: Breadcrumbs },
{ path: '/base/carousels', name: 'Carousels', component: Carousels },
{ path: '/base/collapses', name: 'Collapses', component: Collapses },
{ path: '/base/dropdowns', name: 'Dropdowns', component: Dropdowns },
{ path: '/base/jumbotrons', name: 'Jumbotrons', component: Jumbotrons },
{ path: '/base/list-groups', name: 'ListGroups', component: ListGroups },
{ path: '/base/navbars', name: 'Navbars', component: Navbars },
{ path: '/base/navs', name: 'Navs', component: Navs },
{ path: '/base/paginations', name: 'Paginations', component: Paginations },
{ path: '/base/popovers', name: 'Popovers', component: Popovers },
{ path: '/base/progress-bar', name: 'Progress Bar', component: ProgressBar },
{ path: '/base/tooltips', name: 'Tooltips', component: Tooltips },
{ path: '/buttons', exact: true, name: 'Buttons', component: Buttons },
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons },
{ path: '/buttons/button-dropdowns', name: 'ButtonDropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'ButtonGroups', component: ButtonGroups },
{ path: '/buttons/social-buttons', name: 'Social Buttons', component: SocialButtons },
{ path: '/icons', exact: true, name: 'Icons', component: Flags },
{ path: '/icons/flags', name: 'Flags', component: Flags },
{ path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
{ path: '/icons/simple-line-icons', name: 'Simple Line Icons', component: SimpleLineIcons },
{ path: '/notifications', exact: true, name: 'Notifications', component: Alerts },
{ path: '/notifications/alerts', name: 'Alerts', component: Alerts },
{ path: '/notifications/badges', name: 'Badges', component: Badges },
{ path: '/notifications/modals', name: 'Modals', component: Modals },
{ path: '/widgets', name: 'Widgets', component: Widgets },
{ path: '/charts', name: 'Charts', component: Charts },
];
export default routes;

0
public/scss/_custom.scss → src/scss/_custom.scss
View File

0
public/scss/_variables.scss → src/scss/_variables.scss
View File

9467
src/scss/style.css Normal file
View File

File diff suppressed because it is too large Load Diff

2
public/scss/style.scss → src/scss/style.scss
View File

@ -3,6 +3,8 @@
// Import styles // Import styles
@import "node_modules/@coreui/styles/scss/coreui"; @import "node_modules/@coreui/styles/scss/coreui";
// Temp fix for reactstrap
@import 'node_modules/@coreui/styles/scss/_dropdown-menu-right.scss';
// If you want to add something do it here // If you want to add something do it here
@import "custom"; @import "custom";

0
public/scss/vendors/_variables.scss → src/scss/vendors/_variables.scss vendored
View File

42
src/scss/vendors/chart.js/chart.css vendored Normal file
View File

@ -0,0 +1,42 @@
.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
list-style-type: none;
margin-top: 5px;
text-align: center;
-webkit-padding-start: 0;
-moz-padding-start: 0;
padding-left: 0; }
.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
display: inline-block;
white-space: nowrap;
position: relative;
margin-bottom: 4px;
padding: 2px 8px 2px 28px;
font-size: smaller;
cursor: default; }
.chart-legend li span,
.bar-legend li span,
.line-legend li span,
.pie-legend li span,
.radar-legend li span,
.polararea-legend li span,
.doughnut-legend li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px; }

48
src/scss/vendors/chart.js/chart.scss vendored Normal file
View File

@ -0,0 +1,48 @@
// Import variables
@import '../variables';
.chart-legend,
.bar-legend,
.line-legend,
.pie-legend,
.radar-legend,
.polararea-legend,
.doughnut-legend {
list-style-type: none;
margin-top: 5px;
text-align: center;
-webkit-padding-start: 0;
-moz-padding-start: 0;
padding-left: 0;
}
.chart-legend li,
.bar-legend li,
.line-legend li,
.pie-legend li,
.radar-legend li,
.polararea-legend li,
.doughnut-legend li {
display: inline-block;
white-space: nowrap;
position: relative;
margin-bottom: 4px;
@include border-radius($border-radius);
padding: 2px 8px 2px 28px;
font-size: smaller;
cursor: default;
}
.chart-legend li span,
.bar-legend li span,
.line-legend li span,
.pie-legend li span,
.radar-legend li span,
.polararea-legend li span,
.doughnut-legend li span {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 20px;
@include border-radius($border-radius);
}

10
src/views/Base/Breadcrumbs/Breadcrumbs.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, CardFooter, Breadcrumb, BreadcrumbItem } from 'reactstrap'; import { Breadcrumb, BreadcrumbItem, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Breadcrumbs extends Component { class Breadcrumbs extends Component {
render() { render() {
@ -10,8 +10,8 @@ class Breadcrumbs extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Breadcrumbs</strong> <i className="fa fa-align-justify"></i><strong>Breadcrumbs</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/breadcrumbs/" target="_blank"> <a href="https://reactstrap.github.io/components/breadcrumbs/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -40,7 +40,7 @@ class Breadcrumbs extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

20
src/views/Base/Cards/Cards.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBody, Label, Input} from 'reactstrap'; import { Badge, Card, CardBody, CardFooter, CardHeader, Col, Input, Label, Row } from 'reactstrap';
class Cards extends Component { class Cards extends Component {
render() { render() {
@ -45,7 +45,7 @@ class Cards extends Component {
<CardHeader> <CardHeader>
Card with switch Card with switch
<Label className="switch switch-sm switch-text switch-info float-right mb-0"> <Label className="switch switch-sm switch-text switch-info float-right mb-0">
<Input type="checkbox" className="switch-input"/> <Input type="checkbox" className="switch-input" />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -239,7 +239,7 @@ class Cards extends Component {
<CardBody> <CardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
</CardBody> </CardBody>
</Card> </Card>
@ -249,7 +249,7 @@ class Cards extends Component {
<CardBody> <CardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
</CardBody> </CardBody>
</Card> </Card>
@ -259,7 +259,7 @@ class Cards extends Component {
<CardBody> <CardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
</CardBody> </CardBody>
</Card> </Card>
@ -269,7 +269,7 @@ class Cards extends Component {
<CardBody> <CardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
</CardBody> </CardBody>
</Card> </Card>
@ -279,7 +279,7 @@ class Cards extends Component {
<CardBody> <CardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
</CardBody> </CardBody>
</Card> </Card>
@ -289,7 +289,7 @@ class Cards extends Component {
<CardBody> <CardBody>
<blockquote className="card-bodyquote"> <blockquote className="card-bodyquote">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite> </footer> <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote> </blockquote>
</CardBody> </CardBody>
</Card> </Card>
@ -359,7 +359,7 @@ class Cards extends Component {
</Row> </Row>
</div> </div>
) );
} }
} }

56
src/views/Base/Carousels/Carousels.js
View File

@ -1,41 +1,29 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Card, CardBody, CardHeader, Carousel, CarouselCaption, CarouselControl, CarouselIndicators, CarouselItem, Col, Row } from 'reactstrap';
Row,
Col,
Card,
CardHeader,
CardBody,
Carousel,
CarouselItem,
CarouselControl,
CarouselIndicators,
CarouselCaption
} from 'reactstrap';
const items = [ const items = [
{ {
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_1607923e7e2%20text%20%7B%20fill%3A%23555%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_1607923e7e2%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23777%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22285.9296875%22%20y%3D%22217.75625%22%3EFirst%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 1', altText: 'Slide 1',
caption: 'Slide 1' caption: 'Slide 1',
}, },
{ {
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa20%20text%20%7B%20fill%3A%23444%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa20%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23666%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22247.3203125%22%20y%3D%22218.3%22%3ESecond%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 2', altText: 'Slide 2',
caption: 'Slide 2' caption: 'Slide 2',
}, },
{ {
src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E', src: 'data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20800%20400%22%20preserveAspectRatio%3D%22none%22%3E%3Cdefs%3E%3Cstyle%20type%3D%22text%2Fcss%22%3E%23holder_15ba800aa21%20text%20%7B%20fill%3A%23333%3Bfont-weight%3Anormal%3Bfont-family%3AHelvetica%2C%20monospace%3Bfont-size%3A40pt%20%7D%20%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22holder_15ba800aa21%22%3E%3Crect%20width%3D%22800%22%20height%3D%22400%22%20fill%3D%22%23555%22%3E%3C%2Frect%3E%3Cg%3E%3Ctext%20x%3D%22277%22%20y%3D%22218.3%22%3EThird%20slide%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fg%3E%3C%2Fsvg%3E',
altText: 'Slide 3', altText: 'Slide 3',
caption: 'Slide 3' caption: 'Slide 3',
} },
]; ];
class Carousels extends Component { class Carousels extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {activeIndex: 0}; this.state = { activeIndex: 0 };
this.next = this.next.bind(this); this.next = this.next.bind(this);
this.previous = this.previous.bind(this); this.previous = this.previous.bind(this);
this.goToIndex = this.goToIndex.bind(this); this.goToIndex = this.goToIndex.bind(this);
@ -54,31 +42,27 @@ class Carousels extends Component {
next() { next() {
if (this.animating) return; if (this.animating) return;
const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1; const nextIndex = this.state.activeIndex === items.length - 1 ? 0 : this.state.activeIndex + 1;
this.setState({activeIndex: nextIndex}); this.setState({ activeIndex: nextIndex });
} }
previous() { previous() {
if (this.animating) return; if (this.animating) return;
const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1; const nextIndex = this.state.activeIndex === 0 ? items.length - 1 : this.state.activeIndex - 1;
this.setState({activeIndex: nextIndex}); this.setState({ activeIndex: nextIndex });
} }
goToIndex(newIndex) { goToIndex(newIndex) {
if (this.animating) return; if (this.animating) return;
this.setState({activeIndex: newIndex}); this.setState({ activeIndex: newIndex });
} }
render() { render() {
const {activeIndex} = this.state; const { activeIndex } = this.state;
const slides = items.map((item) => { const slides = items.map((item) => {
return ( return (
<CarouselItem <CarouselItem onExiting={this.onExiting} onExited={this.onExited} key={item.src}>
onExiting={this.onExiting} <img className="d-block w-100" src={item.src} alt={item.altText} />
onExited={this.onExited}
key={item.src}
>
<img className="d-block w-100" src={item.src} alt={item.altText}/>
</CarouselItem> </CarouselItem>
); );
}); });
@ -90,8 +74,8 @@ class Carousels extends Component {
onExited={this.onExited} onExited={this.onExited}
key={item.src} key={item.src}
> >
<img className="d-block w-100" src={item.src} alt={item.altText}/> <img className="d-block w-100" src={item.src} alt={item.altText} />
<CarouselCaption captionText={item.caption} captionHeader={item.caption}/> <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem> </CarouselItem>
); );
}); });
@ -103,8 +87,8 @@ class Carousels extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Carousel</strong> <i className="fa fa-align-justify"></i><strong>Carousel</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/carousel/" target="_blank"> <a href="https://reactstrap.github.io/components/carousel/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -123,10 +107,10 @@ class Carousels extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Carousel activeIndex={activeIndex} next={this.next} previous={this.previous}> <Carousel activeIndex={activeIndex} next={this.next} previous={this.previous}>
<CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex}/> <CarouselIndicators items={items} activeIndex={activeIndex} onClickHandler={this.goToIndex} />
{slides2} {slides2}
<CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous}/> <CarouselControl direction="prev" directionText="Previous" onClickHandler={this.previous} />
<CarouselControl direction="next" directionText="Next" onClickHandler={this.next}/> <CarouselControl direction="next" directionText="Next" onClickHandler={this.next} />
</Carousel> </Carousel>
</CardBody> </CardBody>
</Card> </Card>

36
src/views/Base/Collapses/Collapses.js
View File

@ -1,13 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Button, Card, CardBody, CardFooter, CardHeader, Collapse, Fade } from 'reactstrap';
Row,
Col,
Card,
CardHeader,
CardBody,
CardFooter,
Collapse, Button, Fade
} from 'reactstrap';
class Collapses extends Component { class Collapses extends Component {
@ -23,32 +15,32 @@ class Collapses extends Component {
collapse: false, collapse: false,
status: 'Closed', status: 'Closed',
fadeIn: true, fadeIn: true,
timeout: 300 timeout: 300,
}; };
} }
onEntering() { onEntering() {
this.setState({status: 'Opening...'}); this.setState({ status: 'Opening...' });
} }
onEntered() { onEntered() {
this.setState({status: 'Opened'}); this.setState({ status: 'Opened' });
} }
onExiting() { onExiting() {
this.setState({status: 'Closing...'}); this.setState({ status: 'Closing...' });
} }
onExited() { onExited() {
this.setState({status: 'Closed'}); this.setState({ status: 'Closed' });
} }
toggle() { toggle() {
this.setState({collapse: !this.state.collapse}); this.setState({ collapse: !this.state.collapse });
} }
toggleFade() { toggleFade() {
this.setState({fadeIn: !this.state.fadeIn}); this.setState({ fadeIn: !this.state.fadeIn });
} }
render() { render() {
@ -57,8 +49,8 @@ class Collapses extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Collapse</strong> <i className="fa fa-align-justify"></i><strong>Collapse</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/collapse/" target="_blank"> <a href="https://reactstrap.github.io/components/collapse/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -91,15 +83,15 @@ class Collapses extends Component {
</CardBody> </CardBody>
</Collapse> </Collapse>
<CardFooter> <CardFooter>
<Button color="primary" onClick={this.toggle} style={{marginBottom: '1rem'}}>Toggle</Button> <Button color="primary" onClick={this.toggle} style={{ marginBottom: '1rem' }}>Toggle</Button>
<h5>Current state: {this.state.status}</h5> <h5>Current state: {this.state.status}</h5>
</CardFooter> </CardFooter>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Fade</strong> <i className="fa fa-align-justify"></i><strong>Fade</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/fade/" target="_blank"> <a href="https://reactstrap.github.io/components/fade/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>

40
src/views/Base/Dropdowns/Dropdowns.js
View File

@ -1,9 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Card, CardBody, CardHeader, Col, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Row, UncontrolledDropdown } from 'reactstrap';
Row, Col,
Card, CardHeader, CardBody, CardFooter,
Dropdown, DropdownToggle, DropdownMenu, DropdownItem, UncontrolledDropdown
} from 'reactstrap';
class Dropdowns extends Component { class Dropdowns extends Component {
constructor(props) { constructor(props) {
@ -11,8 +7,8 @@ class Dropdowns extends Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
dropdownOpen: new Array(6).fill(false) dropdownOpen: new Array(6).fill(false),
} };
} }
toggle(i) { toggle(i) {
@ -20,7 +16,7 @@ class Dropdowns extends Component {
return (index === i ? !element : false); return (index === i ? !element : false);
}); });
this.setState({ this.setState({
dropdownOpen: newArray dropdownOpen: newArray,
}); });
} }
@ -32,8 +28,8 @@ class Dropdowns extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdowns</strong> <i className="fa fa-align-justify"></i><strong>Dropdowns</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/dropdowns/" target="_blank"> <a href="https://reactstrap.github.io/components/dropdowns/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -49,7 +45,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem> <DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
@ -69,7 +65,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem> <DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
@ -89,7 +85,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem> <DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
@ -101,7 +97,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem> <DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
@ -113,7 +109,7 @@ class Dropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action</DropdownItem> <DropdownItem disabled>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
@ -124,21 +120,21 @@ class Dropdowns extends Component {
<i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong> <i className="fa fa-align-justify"></i><strong>Custom Dropdowns</strong>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5)}}> <Dropdown isOpen={this.state.dropdownOpen[5]} toggle={() => {this.toggle(5);}}>
<DropdownToggle <DropdownToggle
tag="span" tag="span"
onClick={() => {this.toggle(5)}} onClick={() => {this.toggle(5);}}
data-toggle="dropdown" data-toggle="dropdown"
aria-expanded={this.state.dropdownOpen[5]} aria-expanded={this.state.dropdownOpen[5]}
> >
Custom Dropdown Content <strong> * </strong> Custom Dropdown Content <strong> * </strong>
</DropdownToggle> </DropdownToggle>
<DropdownMenu right> <DropdownMenu right>
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 1 </div> <div onClick={() => {this.toggle(5);}}>Custom dropdown item 1</div>
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 2 </div> <div onClick={() => {this.toggle(5);}}>Custom dropdown item 2</div>
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 3 </div> <div onClick={() => {this.toggle(5);}}>Custom dropdown item 3</div>
<hr className="my-0" /> <hr className="my-0" />
<div onClick={() => {this.toggle(5)}}>Custom dropdown item 4 </div> <div onClick={() => {this.toggle(5);}}>Custom dropdown item 4</div>
</DropdownMenu> </DropdownMenu>
</Dropdown> </Dropdown>
</CardBody> </CardBody>

354
src/views/Base/Forms/Forms.js
View File

@ -1,25 +1,25 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import {
Row,
Col,
Button, Button,
ButtonDropdown, ButtonDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem,
Card, Card,
CardHeader,
CardFooter,
CardBody, CardBody,
CardFooter,
CardHeader,
Col,
Collapse, Collapse,
DropdownItem,
DropdownMenu,
DropdownToggle,
Form, Form,
FormGroup, FormGroup,
FormText, FormText,
Label,
Input, Input,
InputGroup, InputGroup,
InputGroupAddon, InputGroupAddon,
InputGroupText InputGroupText,
Label,
Row,
} from 'reactstrap'; } from 'reactstrap';
class Forms extends Component { class Forms extends Component {
@ -49,7 +49,7 @@ class Forms extends Component {
<Col xs="12"> <Col xs="12">
<FormGroup> <FormGroup>
<Label htmlFor="name">Name</Label> <Label htmlFor="name">Name</Label>
<Input type="text" id="name" placeholder="Enter your name" required/> <Input type="text" id="name" placeholder="Enter your name" required />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
@ -57,7 +57,7 @@ class Forms extends Component {
<Col xs="12"> <Col xs="12">
<FormGroup> <FormGroup>
<Label htmlFor="ccnumber">Credit Card Number</Label> <Label htmlFor="ccnumber">Credit Card Number</Label>
<Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required/> <Input type="text" id="ccnumber" placeholder="0000 0000 0000 0000" required />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
@ -101,7 +101,7 @@ class Forms extends Component {
<Col xs="4"> <Col xs="4">
<FormGroup> <FormGroup>
<Label htmlFor="cvv">CVV/CVC</Label> <Label htmlFor="cvv">CVV/CVC</Label>
<Input type="text" id="cvv" placeholder="123" required/> <Input type="text" id="cvv" placeholder="123" required />
</FormGroup> </FormGroup>
</Col> </Col>
</Row> </Row>
@ -117,33 +117,33 @@ class Forms extends Component {
<CardBody> <CardBody>
<FormGroup> <FormGroup>
<Label htmlFor="company">Company</Label> <Label htmlFor="company">Company</Label>
<Input type="text" id="company" placeholder="Enter your company name"/> <Input type="text" id="company" placeholder="Enter your company name" />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label htmlFor="vat">VAT</Label> <Label htmlFor="vat">VAT</Label>
<Input type="text" id="vat" placeholder="DE1234567890"/> <Input type="text" id="vat" placeholder="DE1234567890" />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label htmlFor="street">Street</Label> <Label htmlFor="street">Street</Label>
<Input type="text" id="street" placeholder="Enter street name"/> <Input type="text" id="street" placeholder="Enter street name" />
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col xs="8"> <Col xs="8">
<FormGroup> <FormGroup>
<Label htmlFor="city">City</Label> <Label htmlFor="city">City</Label>
<Input type="text" id="city" placeholder="Enter your city"/> <Input type="text" id="city" placeholder="Enter your city" />
</FormGroup> </FormGroup>
</Col> </Col>
<Col xs="8"> <Col xs="8">
<FormGroup> <FormGroup>
<Label htmlFor="postal-code">Postal Code</Label> <Label htmlFor="postal-code">Postal Code</Label>
<Input type="text" id="postal-code" placeholder="Postal Code"/> <Input type="text" id="postal-code" placeholder="Postal Code" />
</FormGroup> </FormGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label htmlFor="country">Country</Label> <Label htmlFor="country">Country</Label>
<Input type="text" id="country" placeholder="Country name"/> <Input type="text" id="country" placeholder="Country name" />
</FormGroup> </FormGroup>
</CardBody> </CardBody>
</Card> </Card>
@ -170,7 +170,7 @@ class Forms extends Component {
<Label htmlFor="text-input">Text Input</Label> <Label htmlFor="text-input">Text Input</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="text" id="text-input" name="text-input" placeholder="Text"/> <Input type="text" id="text-input" name="text-input" placeholder="Text" />
<FormText color="muted">This is a help text</FormText> <FormText color="muted">This is a help text</FormText>
</Col> </Col>
</FormGroup> </FormGroup>
@ -179,7 +179,7 @@ class Forms extends Component {
<Label htmlFor="email-input">Email Input</Label> <Label htmlFor="email-input">Email Input</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="email" id="email-input" name="email-input" placeholder="Enter Email"/> <Input type="email" id="email-input" name="email-input" placeholder="Enter Email" />
<FormText className="help-block">Please enter your email</FormText> <FormText className="help-block">Please enter your email</FormText>
</Col> </Col>
</FormGroup> </FormGroup>
@ -188,7 +188,7 @@ class Forms extends Component {
<Label htmlFor="password-input">Password</Label> <Label htmlFor="password-input">Password</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="password" id="password-input" name="password-input" placeholder="Password"/> <Input type="password" id="password-input" name="password-input" placeholder="Password" />
<FormText className="help-block">Please enter a complex password</FormText> <FormText className="help-block">Please enter a complex password</FormText>
</Col> </Col>
</FormGroup> </FormGroup>
@ -197,7 +197,7 @@ class Forms extends Component {
<Label htmlFor="disabled-input">Disabled Input</Label> <Label htmlFor="disabled-input">Disabled Input</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled/> <Input type="text" id="disabled-input" name="disabled-input" placeholder="Disabled" disabled />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
@ -206,7 +206,7 @@ class Forms extends Component {
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="textarea" name="textarea-input" id="textarea-input" rows="9" <Input type="textarea" name="textarea-input" id="textarea-input" rows="9"
placeholder="Content..."/> placeholder="Content..." />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
@ -288,15 +288,15 @@ class Forms extends Component {
</Col> </Col>
<Col md="9"> <Col md="9">
<FormGroup check className="radio"> <FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1"/> <Input className="form-check-input" type="radio" id="radio1" name="radios" value="option1" />
<Label check className="form-check-label" htmlFor="radio1">Option 1</Label> <Label check className="form-check-label" htmlFor="radio1">Option 1</Label>
</FormGroup> </FormGroup>
<FormGroup check className="radio"> <FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2"/> <Input className="form-check-input" type="radio" id="radio2" name="radios" value="option2" />
<Label check className="form-check-label" htmlFor="radio2">Option 2</Label> <Label check className="form-check-label" htmlFor="radio2">Option 2</Label>
</FormGroup> </FormGroup>
<FormGroup check className="radio"> <FormGroup check className="radio">
<Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3"/> <Input className="form-check-input" type="radio" id="radio3" name="radios" value="option3" />
<Label check className="form-check-label" htmlFor="radio3">Option 3</Label> <Label check className="form-check-label" htmlFor="radio3">Option 3</Label>
</FormGroup> </FormGroup>
</Col> </Col>
@ -307,15 +307,15 @@ class Forms extends Component {
</Col> </Col>
<Col md="9"> <Col md="9">
<FormGroup check inline> <FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1"/> <Input className="form-check-input" type="radio" id="inline-radio1" name="inline-radios" value="option1" />
<Label className="form-check-label" check htmlFor="inline-radio1">One</Label> <Label className="form-check-label" check htmlFor="inline-radio1">One</Label>
</FormGroup> </FormGroup>
<FormGroup check inline> <FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2"/> <Input className="form-check-input" type="radio" id="inline-radio2" name="inline-radios" value="option2" />
<Label className="form-check-label" check htmlFor="inline-radio2">Two</Label> <Label className="form-check-label" check htmlFor="inline-radio2">Two</Label>
</FormGroup> </FormGroup>
<FormGroup check inline> <FormGroup check inline>
<Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3"/> <Input className="form-check-input" type="radio" id="inline-radio3" name="inline-radios" value="option3" />
<Label className="form-check-label" check htmlFor="inline-radio3">Three</Label> <Label className="form-check-label" check htmlFor="inline-radio3">Three</Label>
</FormGroup> </FormGroup>
</Col> </Col>
@ -324,15 +324,15 @@ class Forms extends Component {
<Col md="3"><Label>Checkboxes</Label></Col> <Col md="3"><Label>Checkboxes</Label></Col>
<Col md="9"> <Col md="9">
<FormGroup check className="checkbox"> <FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1"/> <Input className="form-check-input" type="checkbox" id="checkbox1" name="checkbox1" value="option1" />
<Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label> <Label check className="form-check-label" htmlFor="checkbox1">Option 1</Label>
</FormGroup> </FormGroup>
<FormGroup check className="checkbox"> <FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2"/> <Input className="form-check-input" type="checkbox" id="checkbox2" name="checkbox2" value="option2" />
<Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label> <Label check className="form-check-label" htmlFor="checkbox2">Option 2</Label>
</FormGroup> </FormGroup>
<FormGroup check className="checkbox"> <FormGroup check className="checkbox">
<Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3"/> <Input className="form-check-input" type="checkbox" id="checkbox3" name="checkbox3" value="option3" />
<Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label> <Label check className="form-check-label" htmlFor="checkbox3">Option 3</Label>
</FormGroup> </FormGroup>
</Col> </Col>
@ -343,15 +343,15 @@ class Forms extends Component {
</Col> </Col>
<Col md="9"> <Col md="9">
<FormGroup check inline> <FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1"/> <Input className="form-check-input" type="checkbox" id="inline-checkbox1" name="inline-checkbox1" value="option1" />
<Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label> <Label className="form-check-label" check htmlFor="inline-checkbox1">One</Label>
</FormGroup> </FormGroup>
<FormGroup check inline> <FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2"/> <Input className="form-check-input" type="checkbox" id="inline-checkbox2" name="inline-checkbox2" value="option2" />
<Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label> <Label className="form-check-label" check htmlFor="inline-checkbox2">Two</Label>
</FormGroup> </FormGroup>
<FormGroup check inline> <FormGroup check inline>
<Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3"/> <Input className="form-check-input" type="checkbox" id="inline-checkbox3" name="inline-checkbox3" value="option3" />
<Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label> <Label className="form-check-label" check htmlFor="inline-checkbox3">Three</Label>
</FormGroup> </FormGroup>
</Col> </Col>
@ -361,7 +361,7 @@ class Forms extends Component {
<Label htmlFor="file-input">File input</Label> <Label htmlFor="file-input">File input</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="file" id="file-input" name="file-input"/> <Input type="file" id="file-input" name="file-input" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
@ -369,7 +369,7 @@ class Forms extends Component {
<Label htmlFor="file-multiple-input">Multiple File input</Label> <Label htmlFor="file-multiple-input">Multiple File input</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="file" id="file-multiple-input" name="file-multiple-input" multiple/> <Input type="file" id="file-multiple-input" name="file-multiple-input" multiple />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row hidden> <FormGroup row hidden>
@ -378,7 +378,7 @@ class Forms extends Component {
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Label className="custom-file"> <Label className="custom-file">
<Input className="custom-file" type="file" id="custom-file-input" name="file-input"/> <Input className="custom-file" type="file" id="custom-file-input" name="file-input" />
<span className="custom-file-control"></span> <span className="custom-file-control"></span>
</Label> </Label>
</Col> </Col>
@ -398,11 +398,11 @@ class Forms extends Component {
<Form action="" method="post" inline> <Form action="" method="post" inline>
<FormGroup className="pr-1"> <FormGroup className="pr-1">
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label> <Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
<Input type="text" id="exampleInputName2" placeholder="Jane Doe" required/> <Input type="text" id="exampleInputName2" placeholder="Jane Doe" required />
</FormGroup> </FormGroup>
<FormGroup className="pr-1"> <FormGroup className="pr-1">
<Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label> <Label htmlFor="exampleInputEmail2" className="pr-1">Email</Label>
<Input type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required/> <Input type="email" id="exampleInputEmail2" placeholder="jane.doe@example.com" required />
</FormGroup> </FormGroup>
</Form> </Form>
</CardBody> </CardBody>
@ -424,7 +424,7 @@ class Forms extends Component {
<Label htmlFor="hf-email">Email</Label> <Label htmlFor="hf-email">Email</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..."/> <Input type="email" id="hf-email" name="hf-email" placeholder="Enter Email..." />
<FormText className="help-block">Please enter your email</FormText> <FormText className="help-block">Please enter your email</FormText>
</Col> </Col>
</FormGroup> </FormGroup>
@ -433,7 +433,7 @@ class Forms extends Component {
<Label htmlFor="hf-password">Password</Label> <Label htmlFor="hf-password">Password</Label>
</Col> </Col>
<Col xs="12" md="9"> <Col xs="12" md="9">
<Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..."/> <Input type="password" id="hf-password" name="hf-password" placeholder="Enter Password..." />
<FormText className="help-block">Please enter your password</FormText> <FormText className="help-block">Please enter your password</FormText>
</Col> </Col>
</FormGroup> </FormGroup>
@ -452,12 +452,12 @@ class Forms extends Component {
<Form action="" method="post"> <Form action="" method="post">
<FormGroup> <FormGroup>
<Label htmlFor="nf-email">Email</Label> <Label htmlFor="nf-email">Email</Label>
<Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.."/> <Input type="email" id="nf-email" name="nf-email" placeholder="Enter Email.." />
<FormText className="help-block">Please enter your email</FormText> <FormText className="help-block">Please enter your email</FormText>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label htmlFor="nf-password">Password</Label> <Label htmlFor="nf-password">Password</Label>
<Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.."/> <Input type="password" id="nf-password" name="nf-password" placeholder="Enter Password.." />
<FormText className="help-block">Please enter your password</FormText> <FormText className="help-block">Please enter your password</FormText>
</FormGroup> </FormGroup>
</Form> </Form>
@ -475,52 +475,52 @@ class Forms extends Component {
<Form action="" method="post" className="form-horizontal"> <Form action="" method="post" className="form-horizontal">
<FormGroup row> <FormGroup row>
<Col sm="3"> <Col sm="3">
<Input type="text" placeholder=".col-sm-3"/> <Input type="text" placeholder=".col-sm-3" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="4"> <Col sm="4">
<Input type="text" placeholder=".col-sm-4"/> <Input type="text" placeholder=".col-sm-4" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="5"> <Col sm="5">
<Input type="text" placeholder=".col-sm-5"/> <Input type="text" placeholder=".col-sm-5" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="6"> <Col sm="6">
<Input type="text" placeholder=".col-sm-6"/> <Input type="text" placeholder=".col-sm-6" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="7"> <Col sm="7">
<Input type="text" placeholder=".col-sm-7"/> <Input type="text" placeholder=".col-sm-7" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="8"> <Col sm="8">
<Input type="text" placeholder=".col-sm-8"/> <Input type="text" placeholder=".col-sm-8" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="9"> <Col sm="9">
<Input type="text" placeholder=".col-sm-9"/> <Input type="text" placeholder=".col-sm-9" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="10"> <Col sm="10">
<Input type="text" placeholder=".col-sm-10"/> <Input type="text" placeholder=".col-sm-10" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="11"> <Col sm="11">
<Input type="text" placeholder=".col-sm-11"/> <Input type="text" placeholder=".col-sm-11" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col sm="12"> <Col sm="12">
<Input type="text" placeholder=".col-sm-12"/> <Input type="text" placeholder=".col-sm-12" />
</Col> </Col>
</FormGroup> </FormGroup>
</Form> </Form>
@ -539,19 +539,19 @@ class Forms extends Component {
<FormGroup row> <FormGroup row>
<Label sm="5" size="sm" htmlFor="input-small">Small Input</Label> <Label sm="5" size="sm" htmlFor="input-small">Small Input</Label>
<Col sm="6"> <Col sm="6">
<Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm"/> <Input bsSize="sm" type="text" id="input-small" name="input-small" className="input-sm" placeholder=".form-control-sm" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Label sm="5" htmlFor="input-normal">Normal Input</Label> <Label sm="5" htmlFor="input-normal">Normal Input</Label>
<Col sm="6"> <Col sm="6">
<Input type="text" id="input-normal" name="input-normal" placeholder="Normal"/> <Input type="text" id="input-normal" name="input-normal" placeholder="Normal" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Label sm="5" size="lg" htmlFor="input-large">Large Input</Label> <Label sm="5" size="lg" htmlFor="input-large">Large Input</Label>
<Col sm="6"> <Col sm="6">
<Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg"/> <Input bsSize="lg" type="text" id="input-large" name="input-large" className="input-lg" placeholder=".form-control-lg" />
</Col> </Col>
</FormGroup> </FormGroup>
</Form> </Form>
@ -572,11 +572,11 @@ class Forms extends Component {
<CardBody> <CardBody>
<FormGroup> <FormGroup>
<Label htmlFor="inputIsValid">Input is valid</Label> <Label htmlFor="inputIsValid">Input is valid</Label>
<Input type="text" className="is-valid" id="inputIsValid"/> <Input type="text" className="is-valid" id="inputIsValid" />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label htmlFor="inputIsInvalid">Input is invalid</Label> <Label htmlFor="inputIsInvalid">Input is invalid</Label>
<Input type="text" className="is-invalid" id="inputIsInvalid"/> <Input type="text" className="is-invalid" id="inputIsInvalid" />
</FormGroup> </FormGroup>
</CardBody> </CardBody>
</Card> </Card>
@ -590,11 +590,11 @@ class Forms extends Component {
<Form className="was-validated"> <Form className="was-validated">
<FormGroup> <FormGroup>
<Label htmlFor="inputSuccess2i">Non-required input</Label> <Label htmlFor="inputSuccess2i">Non-required input</Label>
<Input type="text" className="form-control-success" id="inputSuccess2i"/> <Input type="text" className="form-control-success" id="inputSuccess2i" />
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<Label htmlFor="inputWarning2i">Required input</Label> <Label htmlFor="inputWarning2i">Required input</Label>
<Input type="text" className="form-control-warning" id="inputWarning2i" required/> <Input type="text" className="form-control-warning" id="inputWarning2i" required />
</FormGroup> </FormGroup>
</Form> </Form>
</CardBody> </CardBody>
@ -617,14 +617,14 @@ class Forms extends Component {
<i className="fa fa-user"></i> <i className="fa fa-user"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="input1-group1" name="input1-group1" placeholder="Username"/> <Input type="text" id="input1-group1" name="input1-group1" placeholder="Username" />
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<Input type="email" id="input2-group1" name="input2-group1" placeholder="Email"/> <Input type="email" id="input2-group1" name="input2-group1" placeholder="Email" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText> <InputGroupText>
<i className="fa fa-envelope-o"></i> <i className="fa fa-envelope-o"></i>
@ -641,7 +641,7 @@ class Forms extends Component {
<i className="fa fa-euro"></i> <i className="fa fa-euro"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="input3-group1" name="input3-group1" placeholder=".."/> <Input type="text" id="input3-group1" name="input3-group1" placeholder=".." />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText> <InputGroupText>.00</InputGroupText>
</InputGroupAddon> </InputGroupAddon>
@ -669,14 +669,14 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button> <Button type="button" color="primary"><i className="fa fa-search"></i> Search</Button>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="input1-group2" name="input1-group2" placeholder="Username"/> <Input type="text" id="input1-group2" name="input1-group2" placeholder="Username" />
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<Input type="email" id="input2-group2" name="input2-group2" placeholder="Email"/> <Input type="email" id="input2-group2" name="input2-group2" placeholder="Email" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<Button type="button" color="primary">Submit</Button> <Button type="button" color="primary">Submit</Button>
</InputGroupAddon> </InputGroupAddon>
@ -689,7 +689,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<Button type="button" color="primary"><i className="fa fa-facebook"></i></Button> <Button type="button" color="primary"><i className="fa fa-facebook"></i></Button>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="input3-group2" name="input3-group2" placeholder="Search"/> <Input type="text" id="input3-group2" name="input3-group2" placeholder="Search" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<Button type="button" color="primary"><i className="fa fa-twitter"></i></Button> <Button type="button" color="primary"><i className="fa fa-twitter"></i></Button>
</InputGroupAddon> </InputGroupAddon>
@ -720,34 +720,34 @@ class Forms extends Component {
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
<DropdownMenu className={this.state.first ? "show" : ""}> <DropdownMenu className={this.state.first ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="input1-group3" name="input1-group3" placeholder="Username"/> <Input type="text" id="input1-group3" name="input1-group3" placeholder="Username" />
</InputGroup> </InputGroup>
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="12"> <Col md="12">
<InputGroup> <InputGroup>
<Input type="email" id="input2-group3" name="input2-group3" placeholder="Email"/> <Input type="email" id="input2-group3" name="input2-group3" placeholder="Email" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.second} <ButtonDropdown isOpen={this.state.second}
toggle={() => { this.setState({ second: !this.state.second }); }}> toggle={() => { this.setState({ second: !this.state.second }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
<DropdownMenu className={this.state.second ? "show" : ""}> <DropdownMenu className={this.state.second ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -763,27 +763,27 @@ class Forms extends Component {
toggle={() => { this.setState({ third: !this.state.third }); }}> toggle={() => { this.setState({ third: !this.state.third }); }}>
{/*<Button id="caret" color="primary">Action</Button>*/} {/*<Button id="caret" color="primary">Action</Button>*/}
<DropdownToggle caret color="primary">Action</DropdownToggle> <DropdownToggle caret color="primary">Action</DropdownToggle>
<DropdownMenu className={this.state.third ? "show" : ""}> <DropdownMenu className={this.state.third ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="input3-group3" name="input3-group3" placeholder=".."/> <Input type="text" id="input3-group3" name="input3-group3" placeholder=".." />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<ButtonDropdown isOpen={this.state.fourth} <ButtonDropdown isOpen={this.state.fourth}
toggle={() => { this.setState({ fourth: !this.state.fourth }); }}> toggle={() => { this.setState({ fourth: !this.state.fourth }); }}>
<DropdownToggle caret color="primary"> <DropdownToggle caret color="primary">
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
<DropdownMenu className={this.state.fourth ? "show" : ""}> <DropdownMenu className={this.state.fourth ? 'show' : ''}>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
<DropdownItem>Something else here</DropdownItem> <DropdownItem>Something else here</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Separated link</DropdownItem> <DropdownItem>Separated link</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -811,42 +811,42 @@ class Forms extends Component {
<Form action="" method="post" className="form-horizontal"> <Form action="" method="post" className="form-horizontal">
<FormGroup row> <FormGroup row>
<Col md="8"> <Col md="8">
<Input type="text" placeholder=".col-md-8"/> <Input type="text" placeholder=".col-md-8" />
</Col> </Col>
<Col md="4"> <Col md="4">
<Input type="text" placeholder=".col-md-4"/> <Input type="text" placeholder=".col-md-4" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="7"> <Col md="7">
<Input type="text" placeholder=".col-md-7"/> <Input type="text" placeholder=".col-md-7" />
</Col> </Col>
<Col md="5"> <Col md="5">
<Input type="text" placeholder=".col-md-5"/> <Input type="text" placeholder=".col-md-5" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="6"> <Col md="6">
<Input type="text" placeholder=".col-md-6"/> <Input type="text" placeholder=".col-md-6" />
</Col> </Col>
<Col md="6"> <Col md="6">
<Input type="text" placeholder=".col-md-6"/> <Input type="text" placeholder=".col-md-6" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="5"> <Col md="5">
<Input type="text" placeholder=".col-md-5"/> <Input type="text" placeholder=".col-md-5" />
</Col> </Col>
<Col md="7"> <Col md="7">
<Input type="text" placeholder=".col-md-7"/> <Input type="text" placeholder=".col-md-7" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col md="4"> <Col md="4">
<Input type="text" placeholder=".col-md-4"/> <Input type="text" placeholder=".col-md-4" />
</Col> </Col>
<Col md="8"> <Col md="8">
<Input type="text" placeholder=".col-md-8"/> <Input type="text" placeholder=".col-md-8" />
</Col> </Col>
</FormGroup> </FormGroup>
</Form> </Form>
@ -870,42 +870,42 @@ class Forms extends Component {
<Form action="" method="post" className="form-horizontal"> <Form action="" method="post" className="form-horizontal">
<FormGroup row> <FormGroup row>
<Col xs="4"> <Col xs="4">
<Input type="text" placeholder=".col-4"/> <Input type="text" placeholder=".col-4" />
</Col> </Col>
<Col xs="8"> <Col xs="8">
<Input type="text" placeholder=".col-8"/> <Input type="text" placeholder=".col-8" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col xs="5"> <Col xs="5">
<Input type="text" placeholder=".col-5"/> <Input type="text" placeholder=".col-5" />
</Col> </Col>
<Col xs="7"> <Col xs="7">
<Input type="text" placeholder=".col-7"/> <Input type="text" placeholder=".col-7" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col xs="6"> <Col xs="6">
<Input type="text" placeholder=".col-6"/> <Input type="text" placeholder=".col-6" />
</Col> </Col>
<Col xs="6"> <Col xs="6">
<Input type="text" placeholder=".col-6"/> <Input type="text" placeholder=".col-6" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col xs="7"> <Col xs="7">
<Input type="text" placeholder=".col-5"/> <Input type="text" placeholder=".col-5" />
</Col> </Col>
<Col xs="5"> <Col xs="5">
<Input type="text" placeholder=".col-5"/> <Input type="text" placeholder=".col-5" />
</Col> </Col>
</FormGroup> </FormGroup>
<FormGroup row> <FormGroup row>
<Col xs="8"> <Col xs="8">
<Input type="text" placeholder=".col-8"/> <Input type="text" placeholder=".col-8" />
</Col> </Col>
<Col xs="4"> <Col xs="4">
<Input type="text" placeholder=".col-4"/> <Input type="text" placeholder=".col-4" />
</Col> </Col>
</FormGroup> </FormGroup>
</Form> </Form>
@ -933,7 +933,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText>Username</InputGroupText> <InputGroupText>Username</InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="username3" name="username3"/> <Input type="text" id="username3" name="username3" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText> <InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
@ -944,7 +944,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText>Email</InputGroupText> <InputGroupText>Email</InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="email" id="email3" name="email3"/> <Input type="email" id="email3" name="email3" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText> <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
@ -955,7 +955,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText>Password</InputGroupText> <InputGroupText>Password</InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="password" id="password3" name="password3"/> <Input type="password" id="password3" name="password3" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText> <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
@ -977,7 +977,7 @@ class Forms extends Component {
<Form action="" method="post"> <Form action="" method="post">
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<Input type="text" id="username2" name="username2" placeholder="Username"/> <Input type="text" id="username2" name="username2" placeholder="Username" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-user"></i></InputGroupText> <InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
@ -985,7 +985,7 @@ class Forms extends Component {
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<Input type="email" id="email2" name="email2" placeholder="Email"/> <Input type="email" id="email2" name="email2" placeholder="Email" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText> <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
@ -993,7 +993,7 @@ class Forms extends Component {
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
<InputGroup> <InputGroup>
<Input type="password" id="password2" name="password2" placeholder="Password"/> <Input type="password" id="password2" name="password2" placeholder="Password" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText> <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
@ -1018,7 +1018,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-user"></i></InputGroupText> <InputGroupText><i className="fa fa-user"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" id="username" name="username" placeholder="Username"/> <Input type="text" id="username" name="username" placeholder="Username" />
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
@ -1026,7 +1026,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-envelope"></i></InputGroupText> <InputGroupText><i className="fa fa-envelope"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="email" id="email" name="email" placeholder="Email"/> <Input type="email" id="email" name="email" placeholder="Email" />
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup> <FormGroup>
@ -1034,7 +1034,7 @@ class Forms extends Component {
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText><i className="fa fa-asterisk"></i></InputGroupText> <InputGroupText><i className="fa fa-asterisk"></i></InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="password" id="password" name="password" placeholder="Password"/> <Input type="password" id="password" name="password" placeholder="Password" />
</InputGroup> </InputGroup>
</FormGroup> </FormGroup>
<FormGroup className="form-actions"> <FormGroup className="form-actions">
@ -1050,7 +1050,7 @@ class Forms extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-edit"></i>Form Elements <i className="fa fa-edit"></i>Form Elements
<div className="card-actions"> <div className="card-header-actions">
<a href="#" className="btn-setting"><i className="icon-settings"></i></a> <a href="#" className="btn-setting"><i className="icon-settings"></i></a>
<Button className="btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button> <Button className="btn btn-minimize" data-target="#collapseExample" onClick={this.toggle}><i className="icon-arrow-up"></i></Button>
<a href="#" className="btn-close"><i className="icon-close"></i></a> <a href="#" className="btn-close"><i className="icon-close"></i></a>
@ -1058,80 +1058,80 @@ class Forms extends Component {
</CardHeader> </CardHeader>
<Collapse isOpen={this.state.collapse} id="collapseExample"> <Collapse isOpen={this.state.collapse} id="collapseExample">
<CardBody> <CardBody>
<Form className="form-horizontal"> <Form className="form-horizontal">
<FormGroup> <FormGroup>
<Label htmlFor="prependedInput">Prepended text</Label> <Label htmlFor="prependedInput">Prepended text</Label>
<div className="controls"> <div className="controls">
<InputGroup className="input-prepend"> <InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText> <InputGroupText>@</InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input id="prependedInput" size="16" type="text"/> <Input id="prependedInput" size="16" type="text" />
</InputGroup> </InputGroup>
<p className="help-block">Here's some help text</p> <p className="help-block">Here's some help text</p>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text" />
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text" />
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div> </div>
</FormGroup> </Form>
<FormGroup> </CardBody>
<Label htmlFor="appendedInput">Appended text</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInput" size="16" type="text"/>
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
<span className="help-block">Here's more help text</span>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedPrependedInput">Append and prepend</Label>
<div className="controls">
<InputGroup className="input-prepend">
<InputGroupAddon addonType="prepend">
<InputGroupText>$</InputGroupText>
</InputGroupAddon>
<Input id="appendedPrependedInput" size="16" type="text"/>
<InputGroupAddon addonType="append">
<InputGroupText>.00</InputGroupText>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButton">Append with button</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButton" size="16" type="text"/>
<InputGroupAddon addonType="append">
<Button color="secondary">Go!</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<FormGroup>
<Label htmlFor="appendedInputButtons">Two-button append</Label>
<div className="controls">
<InputGroup>
<Input id="appendedInputButtons" size="16" type="text"/>
<InputGroupAddon addonType="append">
<Button color="secondary">Search</Button>
<Button color="secondary">Options</Button>
</InputGroupAddon>
</InputGroup>
</div>
</FormGroup>
<div className="form-actions">
<Button type="submit" color="primary">Save changes</Button>
<Button color="secondary">Cancel</Button>
</div>
</Form>
</CardBody>
</Collapse> </Collapse>
</Card> </Card>
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

21
src/views/Base/Jumbotrons/Jumbotrons.js
View File

@ -1,13 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Button, Card, CardBody, CardHeader, Container, Jumbotron } from 'reactstrap';
Row,
Col,
Card,
CardHeader,
CardBody,
CardFooter,
Jumbotron, Button, Container
} from 'reactstrap';
class Jumbotrons extends Component { class Jumbotrons extends Component {
@ -17,8 +9,8 @@ class Jumbotrons extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong> <i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/jumbotron/" target="_blank"> <a href="https://reactstrap.github.io/components/jumbotron/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -28,7 +20,7 @@ class Jumbotrons extends Component {
<h1 className="display-3">Hello, world!</h1> <h1 className="display-3">Hello, world!</h1>
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra <p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra
attention to featured content or information.</p> attention to featured content or information.</p>
<hr className="my-2"/> <hr className="my-2" />
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p> <p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
<p className="lead"> <p className="lead">
<Button color="primary">Learn More</Button> <Button color="primary">Learn More</Button>
@ -38,7 +30,8 @@ class Jumbotrons extends Component {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong><small> fluid</small> <i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
<small> fluid</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Jumbotron fluid> <Jumbotron fluid>

22
src/views/Base/ListGroups/ListGroups.js
View File

@ -1,14 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Badge, Card, CardBody, CardHeader, Col, ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText, Row } from 'reactstrap';
Row,
Col,
Card,
CardHeader,
CardBody,
CardFooter,
ListGroup, ListGroupItem, ListGroupItemHeading, ListGroupItemText,
Badge
} from 'reactstrap';
class ListGroups extends Component { class ListGroups extends Component {
@ -20,8 +11,8 @@ class ListGroups extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>List Group</strong> <i className="fa fa-align-justify"></i><strong>List Group</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/listgroup/" target="_blank"> <a href="https://reactstrap.github.io/components/listgroup/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -47,7 +38,8 @@ class ListGroups extends Component {
<ListGroup> <ListGroup>
<ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem> <ListGroupItem className="justify-content-between">Cras justo odio <Badge className="float-right" pill>14</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem> <ListGroupItem className="justify-content-between">Dapibus ac facilisis in <Badge className="float-right" pill>2</Badge></ListGroupItem>
<ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill color="warning">1</Badge></ListGroupItem> <ListGroupItem className="justify-content-between">Morbi leo risus <Badge className="float-right" pill
color="warning">1</Badge></ListGroupItem>
</ListGroup> </ListGroup>
</CardBody> </CardBody>
</Card> </Card>
@ -104,7 +96,7 @@ class ListGroups extends Component {
<ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem> <ListGroupItem tag="a" href="#" action>Porta ac consectetur ac</ListGroupItem>
<ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem> <ListGroupItem disabled tag="a" href="#" action>Vestibulum at eros</ListGroupItem>
</ListGroup> </ListGroup>
<p/> <p />
</CardBody> </CardBody>
</Card> </Card>
</Col> </Col>

34
src/views/Base/Navbars/Navbars.js
View File

@ -1,21 +1,19 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import {
Row,
Col,
Card, Card,
CardHeader,
CardBody, CardBody,
CardHeader,
Collapse, Collapse,
Navbar, DropdownItem,
NavbarToggler, DropdownMenu,
NavbarBrand, DropdownToggle,
Nav, Nav,
Navbar,
NavbarBrand,
NavbarToggler,
NavItem, NavItem,
NavLink, NavLink,
UncontrolledDropdown, UncontrolledDropdown,
DropdownToggle,
DropdownMenu,
DropdownItem
} from 'reactstrap'; } from 'reactstrap';
class Navbars extends Component { class Navbars extends Component {
@ -27,19 +25,19 @@ class Navbars extends Component {
this.toggleNavbar = this.toggleNavbar.bind(this); this.toggleNavbar = this.toggleNavbar.bind(this);
this.state = { this.state = {
isOpen: false, isOpen: false,
collapsed: true collapsed: true,
}; };
} }
toggle() { toggle() {
this.setState({ this.setState({
isOpen: !this.state.isOpen isOpen: !this.state.isOpen,
}); });
} }
toggleNavbar() { toggleNavbar() {
this.setState({ this.setState({
collapsed: !this.state.collapsed collapsed: !this.state.collapsed,
}); });
} }
@ -49,8 +47,8 @@ class Navbars extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Navbar</strong> <i className="fa fa-align-justify"></i><strong>Navbar</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navbar/" target="_blank"> <a href="https://reactstrap.github.io/components/navbar/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -58,7 +56,7 @@ class Navbars extends Component {
<CardBody> <CardBody>
<Navbar color="info" light expand="md"> <Navbar color="info" light expand="md">
<NavbarBrand href="/">Bootstrap</NavbarBrand> <NavbarBrand href="/">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggle}/> <NavbarToggler onClick={this.toggle} />
<Collapse isOpen={this.state.isOpen} navbar> <Collapse isOpen={this.state.isOpen} navbar>
<Nav className="ml-auto" navbar> <Nav className="ml-auto" navbar>
<NavItem> <NavItem>
@ -80,7 +78,7 @@ class Navbars extends Component {
<DropdownItem> <DropdownItem>
Option 2 Option 2
</DropdownItem> </DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem> <DropdownItem>
Reset Reset
</DropdownItem> </DropdownItem>
@ -98,7 +96,7 @@ class Navbars extends Component {
<CardBody> <CardBody>
<Navbar color="success" light> <Navbar color="success" light>
<NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand> <NavbarBrand href="/" className="mr-auto">Bootstrap</NavbarBrand>
<NavbarToggler onClick={this.toggleNavbar} className="mr-2"/> <NavbarToggler onClick={this.toggleNavbar} className="mr-2" />
<Collapse isOpen={!this.state.collapsed} navbar> <Collapse isOpen={!this.state.collapsed} navbar>
<Nav navbar> <Nav navbar>
<NavItem> <NavItem>

34
src/views/Base/Navs/Navs.js
View File

@ -1,13 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Card, CardBody, CardHeader, Dropdown, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavItem, NavLink } from 'reactstrap';
Row,
Col,
Card,
CardHeader,
CardBody,
Nav, NavItem, NavLink,
Dropdown, DropdownToggle, DropdownMenu, DropdownItem
} from 'reactstrap';
class Navs extends Component { class Navs extends Component {
@ -16,7 +8,7 @@ class Navs extends Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
dropdownOpen: [false, false] dropdownOpen: [false, false],
}; };
} }
@ -25,7 +17,7 @@ class Navs extends Component {
return (index === i ? !element : false); return (index === i ? !element : false);
}); });
this.setState({ this.setState({
dropdownOpen: newArray dropdownOpen: newArray,
}); });
} }
@ -35,8 +27,8 @@ class Navs extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Navs</strong> <i className="fa fa-align-justify"></i><strong>Navs</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/navs/" target="_blank"> <a href="https://reactstrap.github.io/components/navs/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -57,10 +49,11 @@ class Navs extends Component {
<NavLink disabled href="#">Disabled Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
<hr/> <hr />
<p>Link Based</p> <p>Link Based</p>
<Nav> <Nav>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav> </Nav>
</CardBody> </CardBody>
</Card> </Card>
@ -73,7 +66,7 @@ class Navs extends Component {
<NavItem> <NavItem>
<NavLink href="#" active>Link</NavLink> <NavLink href="#" active>Link</NavLink>
</NavItem> </NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0)}}> <Dropdown nav isOpen={this.state.dropdownOpen[0]} toggle={() => {this.toggle(0);}}>
<DropdownToggle nav caret> <DropdownToggle nav caret>
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
@ -106,7 +99,7 @@ class Navs extends Component {
<NavItem> <NavItem>
<NavLink href="#" active>Link</NavLink> <NavLink href="#" active>Link</NavLink>
</NavItem> </NavItem>
<Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1)}}> <Dropdown nav isOpen={this.state.dropdownOpen[1]} toggle={() => {this.toggle(1);}}>
<DropdownToggle nav caret> <DropdownToggle nav caret>
Dropdown Dropdown
</DropdownToggle> </DropdownToggle>
@ -150,10 +143,11 @@ class Navs extends Component {
<NavLink disabled href="#">Disabled Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
<hr/> <hr />
<p>Link based</p> <p>Link based</p>
<Nav vertical> <Nav vertical>
<NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Link</NavLink> <NavLink href="#">Another Link</NavLink> <NavLink disabled href="#">Disabled
Link</NavLink>
</Nav> </Nav>
</CardBody> </CardBody>
</Card> </Card>

21
src/views/Base/Paginations/Pagnations.js
View File

@ -1,12 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Card, CardBody, CardHeader, Pagination, PaginationItem, PaginationLink } from 'reactstrap';
Row,
Col,
Card,
CardHeader,
CardBody,
Pagination, PaginationItem, PaginationLink
} from 'reactstrap';
class Paginations extends Component { class Paginations extends Component {
@ -16,8 +9,8 @@ class Paginations extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong> <i className="fa fa-align-justify"></i><strong>Pagination</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/pagination/" target="_blank"> <a href="https://reactstrap.github.io/components/pagination/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -60,7 +53,8 @@ class Paginations extends Component {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong><small> disabled and active states</small> <i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small> disabled and active states</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Pagination> <Pagination>
@ -100,7 +94,8 @@ class Paginations extends Component {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Pagination</strong><small> sizing</small> <i className="fa fa-align-justify"></i><strong>Pagination</strong>
<small> sizing</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Pagination size="lg"> <Pagination size="lg">

35
src/views/Base/Popovers/Popovers.js
View File

@ -1,12 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Button, Card, CardBody, CardHeader, Popover, PopoverBody, PopoverHeader } from 'reactstrap';
Row,
Col,
Card,
CardHeader,
CardBody,
Button, Popover, PopoverHeader, PopoverBody
} from 'reactstrap';
class PopoverItem extends Component { class PopoverItem extends Component {
constructor(props) { constructor(props) {
@ -14,13 +7,13 @@ class PopoverItem extends Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
popoverOpen: false popoverOpen: false,
}; };
} }
toggle() { toggle() {
this.setState({ this.setState({
popoverOpen: !this.state.popoverOpen popoverOpen: !this.state.popoverOpen,
}); });
} }
@ -50,27 +43,27 @@ class Popovers extends Component {
popovers: [ popovers: [
{ {
placement: 'top', placement: 'top',
text: 'Top' text: 'Top',
}, },
{ {
placement: 'bottom', placement: 'bottom',
text: 'Bottom' text: 'Bottom',
}, },
{ {
placement: 'left', placement: 'left',
text: 'Left' text: 'Left',
}, },
{ {
placement: 'right', placement: 'right',
text: 'Right' text: 'Right',
} },
] ],
}; };
} }
toggle() { toggle() {
this.setState({ this.setState({
popoverOpen: !this.state.popoverOpen popoverOpen: !this.state.popoverOpen,
}); });
} }
@ -80,8 +73,8 @@ class Popovers extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Popovers</strong> <i className="fa fa-align-justify"></i><strong>Popovers</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/popovers/" target="_blank"> <a href="https://reactstrap.github.io/components/popovers/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -102,7 +95,7 @@ class Popovers extends Component {
<small> list</small> <small> list</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{ this.state.popovers.map((popover, i) => { {this.state.popovers.map((popover, i) => {
return <PopoverItem key={i} item={popover} id={i} />; return <PopoverItem key={i} item={popover} id={i} />;
})} })}
</CardBody> </CardBody>

97
src/views/Base/ProgressBar/ProgressBar.js
View File

@ -1,10 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Card, CardBody, CardHeader, Progress } from 'reactstrap';
Card,
CardHeader,
CardBody,
Progress
} from 'reactstrap';
class ProgressBar extends Component { class ProgressBar extends Component {
@ -14,30 +9,30 @@ class ProgressBar extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Progress</strong> <i className="fa fa-align-justify"></i><strong>Progress</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/progress/" target="_blank"> <a href="https://reactstrap.github.io/components/progress/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="text-center">0%</div> <div className="text-center">0%</div>
<Progress/> <Progress />
<div className="text-center">25%</div> <div className="text-center">25%</div>
<Progress value="25"/> <Progress value="25" />
<div className="text-center">50%</div> <div className="text-center">50%</div>
<Progress value={50}/> <Progress value={50} />
<div className="text-center">75%</div> <div className="text-center">75%</div>
<Progress value={75}/> <Progress value={75} />
<div className="text-center">100%</div> <div className="text-center">100%</div>
<Progress value="100"/> <Progress value="100" />
<div className="text-center">Multiple bars</div> <div className="text-center">Multiple bars</div>
<Progress multi> <Progress multi>
<Progress bar value="15"/> <Progress bar value="15" />
<Progress bar color="success" value="30"/> <Progress bar color="success" value="30" />
<Progress bar color="info" value="25"/> <Progress bar color="info" value="25" />
<Progress bar color="warning" value="20"/> <Progress bar color="warning" value="20" />
<Progress bar color="danger" value="5"/> <Progress bar color="danger" value="5" />
</Progress> </Progress>
</CardBody> </CardBody>
</Card> </Card>
@ -47,11 +42,11 @@ class ProgressBar extends Component {
<small> color variants</small> <small> color variants</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Progress value={2 * 5} className="mb-3"/> <Progress value={2 * 5} className="mb-3" />
<Progress color="success" value="25" className="mb-3"/> <Progress color="success" value="25" className="mb-3" />
<Progress color="info" value={50} className="mb-3"/> <Progress color="info" value={50} className="mb-3" />
<Progress color="warning" value={75} className="mb-3"/> <Progress color="warning" value={75} className="mb-3" />
<Progress color="danger" value="100" className="mb-3"/> <Progress color="danger" value="100" className="mb-3" />
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
@ -79,16 +74,16 @@ class ProgressBar extends Component {
<small> striped</small> <small> striped</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Progress striped value={2 * 5} className="mb-3"/> <Progress striped value={2 * 5} className="mb-3" />
<Progress striped color="success" value="25" className="mb-3"/> <Progress striped color="success" value="25" className="mb-3" />
<Progress striped color="info" value={50} className="mb-3"/> <Progress striped color="info" value={50} className="mb-3" />
<Progress striped color="warning" value={75} className="mb-3"/> <Progress striped color="warning" value={75} className="mb-3" />
<Progress striped color="danger" value="100" className="mb-3"/> <Progress striped color="danger" value="100" className="mb-3" />
<Progress multi className="mb-3"> <Progress multi className="mb-3">
<Progress striped bar value="10"/> <Progress striped bar value="10" />
<Progress striped bar color="success" value="30"/> <Progress striped bar color="success" value="30" />
<Progress striped bar color="warning" value="20"/> <Progress striped bar color="warning" value="20" />
<Progress striped bar color="danger" value="20"/> <Progress striped bar color="danger" value="20" />
</Progress> </Progress>
</CardBody> </CardBody>
</Card> </Card>
@ -98,16 +93,16 @@ class ProgressBar extends Component {
<small> animated</small> <small> animated</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Progress animated value={2 * 5} className="mb-3"/> <Progress animated value={2 * 5} className="mb-3" />
<Progress animated color="success" value="25" className="mb-3"/> <Progress animated color="success" value="25" className="mb-3" />
<Progress animated color="info" value={50} className="mb-3"/> <Progress animated color="info" value={50} className="mb-3" />
<Progress animated color="warning" value={75} className="mb-3"/> <Progress animated color="warning" value={75} className="mb-3" />
<Progress animated color="danger" value="100" className="mb-3"/> <Progress animated color="danger" value="100" className="mb-3" />
<Progress multi> <Progress multi>
<Progress animated bar value="10"/> <Progress animated bar value="10" />
<Progress animated bar color="success" value="30"/> <Progress animated bar color="success" value="30" />
<Progress animated bar color="warning" value="20"/> <Progress animated bar color="warning" value="20" />
<Progress animated bar color="danger" value="20"/> <Progress animated bar color="danger" value="20" />
</Progress> </Progress>
</CardBody> </CardBody>
</Card> </Card>
@ -119,11 +114,11 @@ class ProgressBar extends Component {
<CardBody> <CardBody>
<div className="text-center">Plain</div> <div className="text-center">Plain</div>
<Progress multi> <Progress multi>
<Progress bar value="15"/> <Progress bar value="15" />
<Progress bar color="success" value="20"/> <Progress bar color="success" value="20" />
<Progress bar color="info" value="25"/> <Progress bar color="info" value="25" />
<Progress bar color="warning" value="20"/> <Progress bar color="warning" value="20" />
<Progress bar color="danger" value="15"/> <Progress bar color="danger" value="15" />
</Progress> </Progress>
<div className="text-center">With Labels</div> <div className="text-center">With Labels</div>
<Progress multi> <Progress multi>
@ -147,13 +142,13 @@ class ProgressBar extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="text-center">1 of 5</div> <div className="text-center">1 of 5</div>
<Progress value="1" max="5"/> <Progress value="1" max="5" />
<div className="text-center">50 of 135</div> <div className="text-center">50 of 135</div>
<Progress value={50} max="135"/> <Progress value={50} max="135" />
<div className="text-center">75 of 111</div> <div className="text-center">75 of 111</div>
<Progress value={75} max={111}/> <Progress value={75} max={111} />
<div className="text-center">463 of 500</div> <div className="text-center">463 of 500</div>
<Progress value="463" max={500}/> <Progress value="463" max={500} />
<div className="text-center">Various (40) of 55</div> <div className="text-center">Various (40) of 55</div>
<Progress multi> <Progress multi>

243
src/views/Base/Switches/Switches.js
View File

@ -1,5 +1,5 @@
import React, {Component} from "react"; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from 'reactstrap'; import { Card, CardBody, CardHeader, Col, Input, Label, Row, Table } from 'reactstrap';
class Switches extends Component { class Switches extends Component {
render() { render() {
@ -14,37 +14,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-3d switch-primary"> <Label className="switch switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-secondary"> <Label className="switch switch-3d switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-success"> <Label className="switch switch-3d switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-warning"> <Label className="switch switch-3d switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-info"> <Label className="switch switch-3d switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-3d switch-danger"> <Label className="switch switch-3d switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -59,37 +59,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-primary"> <Label className="switch switch-default switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-secondary"> <Label className="switch switch-default switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success"> <Label className="switch switch-default switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning"> <Label className="switch switch-default switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info"> <Label className="switch switch-default switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger"> <Label className="switch switch-default switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -104,37 +104,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-pill switch-primary"> <Label className="switch switch-default switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-secondary"> <Label className="switch switch-default switch-pill switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success"> <Label className="switch switch-default switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning"> <Label className="switch switch-default switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info"> <Label className="switch switch-default switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger"> <Label className="switch switch-default switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -149,37 +149,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-primary-outline"> <Label className="switch switch-default switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-secondary-outline"> <Label className="switch switch-default switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success-outline"> <Label className="switch switch-default switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning-outline"> <Label className="switch switch-default switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info-outline"> <Label className="switch switch-default switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger-outline"> <Label className="switch switch-default switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -194,37 +194,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline"> <Label className="switch switch-default switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-secondary-outline"> <Label className="switch switch-default switch-pill switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success-outline"> <Label className="switch switch-default switch-pill switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning-outline"> <Label className="switch switch-default switch-pill switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info-outline"> <Label className="switch switch-default switch-pill switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger-outline"> <Label className="switch switch-default switch-pill switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -239,37 +239,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-primary-outline-alt"> <Label className="switch switch-default switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-secondary-outline-alt"> <Label className="switch switch-default switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-success-outline-alt"> <Label className="switch switch-default switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-warning-outline-alt"> <Label className="switch switch-default switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-info-outline-alt"> <Label className="switch switch-default switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-danger-outline-alt"> <Label className="switch switch-default switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -284,37 +284,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-default switch-pill switch-primary-outline-alt"> <Label className="switch switch-default switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-secondary-outline-alt"> <Label className="switch switch-default switch-pill switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-success-outline-alt"> <Label className="switch switch-default switch-pill switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-warning-outline-alt"> <Label className="switch switch-default switch-pill switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-info-outline-alt"> <Label className="switch switch-default switch-pill switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-default switch-pill switch-danger-outline-alt"> <Label className="switch switch-default switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -329,37 +329,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-primary"> <Label className="switch switch-text switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-secondary"> <Label className="switch switch-text switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success"> <Label className="switch switch-text switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning"> <Label className="switch switch-text switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info"> <Label className="switch switch-text switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger"> <Label className="switch switch-text switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -374,37 +374,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-pill switch-primary"> <Label className="switch switch-text switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-secondary"> <Label className="switch switch-text switch-pill switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-success"> <Label className="switch switch-text switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-warning"> <Label className="switch switch-text switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-info"> <Label className="switch switch-text switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger"> <Label className="switch switch-text switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -420,37 +420,37 @@ class Switches extends Component {
<CardBody> <CardBody>
<Label className="switch switch-text switch-primary-outline"> <Label className="switch switch-text switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-secondary-outline"> <Label className="switch switch-text switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success-outline"> <Label className="switch switch-text switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning-outline"> <Label className="switch switch-text switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info-outline"> <Label className="switch switch-text switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger-outline"> <Label className="switch switch-text switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -466,37 +466,37 @@ class Switches extends Component {
<CardBody> <CardBody>
<Label className="switch switch-text switch-pill switch-primary-outline"> <Label className="switch switch-text switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-secondary-outline"> <Label className="switch switch-text switch-pill switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-success-outline"> <Label className="switch switch-text switch-pill switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-warning-outline"> <Label className="switch switch-text switch-pill switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-info-outline"> <Label className="switch switch-text switch-pill switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger-outline"> <Label className="switch switch-text switch-pill switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -511,37 +511,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-primary-outline-alt"> <Label className="switch switch-text switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-secondary-outline-alt"> <Label className="switch switch-text switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-success-outline-alt"> <Label className="switch switch-text switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-warning-outline-alt"> <Label className="switch switch-text switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-info-outline-alt"> <Label className="switch switch-text switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-danger-outline-alt"> <Label className="switch switch-text switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -556,37 +556,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-text switch-pill switch-primary-outline-alt"> <Label className="switch switch-text switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-secondary-outline-alt"> <Label className="switch switch-text switch-pill switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-success-outline-alt"> <Label className="switch switch-text switch-pill switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-warning-outline-alt"> <Label className="switch switch-text switch-pill switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-info-outline-alt"> <Label className="switch switch-text switch-pill switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-text switch-pill switch-danger-outline-alt"> <Label className="switch switch-text switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on="On" data-off="Off"></span> <span className="switch-label" data-on="On" data-off="Off"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -601,37 +601,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-icon switch-primary"> <Label className="switch switch-icon switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf164'} data-off={'\uf165'}></span> <span className="switch-label" data-on={'\uf164'} data-off={'\uf165'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-secondary"> <Label className="switch switch-icon switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf087'} data-off={'\uf088'}></span> <span className="switch-label" data-on={'\uf087'} data-off={'\uf088'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-success"> <Label className="switch switch-icon switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf028'} data-off={'\uf026'}></span> <span className="switch-label" data-on={'\uf028'} data-off={'\uf026'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-warning"> <Label className="switch switch-icon switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-info"> <Label className="switch switch-icon switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-danger"> <Label className="switch switch-icon switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -646,37 +646,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-icon switch-pill switch-primary"> <Label className="switch switch-icon switch-pill switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-secondary"> <Label className="switch switch-icon switch-pill switch-secondary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-success"> <Label className="switch switch-icon switch-pill switch-success">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-warning"> <Label className="switch switch-icon switch-pill switch-warning">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-info"> <Label className="switch switch-icon switch-pill switch-info">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-danger"> <Label className="switch switch-icon switch-pill switch-danger">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -691,37 +691,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-icon switch-primary-outline"> <Label className="switch switch-icon switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-secondary-outline"> <Label className="switch switch-icon switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-success-outline"> <Label className="switch switch-icon switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-warning-outline"> <Label className="switch switch-icon switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-info-outline"> <Label className="switch switch-icon switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-danger-outline"> <Label className="switch switch-icon switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -736,37 +736,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-icon switch-pill switch-primary-outline"> <Label className="switch switch-icon switch-pill switch-primary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-secondary-outline"> <Label className="switch switch-icon switch-pill switch-secondary-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-success-outline"> <Label className="switch switch-icon switch-pill switch-success-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-warning-outline"> <Label className="switch switch-icon switch-pill switch-warning-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-info-outline"> <Label className="switch switch-icon switch-pill switch-info-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-danger-outline"> <Label className="switch switch-icon switch-pill switch-danger-outline">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -781,37 +781,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-icon switch-primary-outline-alt"> <Label className="switch switch-icon switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-secondary-outline-alt"> <Label className="switch switch-icon switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-success-outline-alt"> <Label className="switch switch-icon switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-warning-outline-alt"> <Label className="switch switch-icon switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-info-outline-alt"> <Label className="switch switch-icon switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-danger-outline-alt"> <Label className="switch switch-icon switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -826,37 +826,37 @@ class Switches extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Label className="switch switch-icon switch-pill switch-primary-outline-alt"> <Label className="switch switch-icon switch-pill switch-primary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-secondary-outline-alt"> <Label className="switch switch-icon switch-pill switch-secondary-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-success-outline-alt"> <Label className="switch switch-icon switch-pill switch-success-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-warning-outline-alt"> <Label className="switch switch-icon switch-pill switch-warning-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-info-outline-alt"> <Label className="switch switch-icon switch-pill switch-info-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
<Label className="switch switch-icon switch-pill switch-danger-outline-alt"> <Label className="switch switch-icon switch-pill switch-danger-outline-alt">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span> <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -885,7 +885,7 @@ class Switches extends Component {
</td> </td>
<td> <td>
<Label className="switch switch-lg switch-3d switch-primary"> <Label className="switch switch-lg switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -900,7 +900,7 @@ class Switches extends Component {
</td> </td>
<td> <td>
<Label className="switch switch-3d switch-primary"> <Label className="switch switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -915,7 +915,7 @@ class Switches extends Component {
</td> </td>
<td> <td>
<Label className="switch switch-sm switch-3d switch-primary"> <Label className="switch switch-sm switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -930,7 +930,7 @@ class Switches extends Component {
</td> </td>
<td> <td>
<Label className="switch switch-xs switch-3d switch-primary"> <Label className="switch switch-xs switch-3d switch-primary">
<Input type="checkbox" className="switch-input" defaultChecked/> <Input type="checkbox" className="switch-input" defaultChecked />
<span className="switch-label"></span> <span className="switch-label"></span>
<span className="switch-handle"></span> <span className="switch-handle"></span>
</Label> </Label>
@ -948,8 +948,7 @@ class Switches extends Component {
</Row> </Row>
</div> </div>
);
)
} }
} }

18
src/views/Base/Tables/Tables.js
View File

@ -1,17 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Badge, Card, CardBody, CardHeader, Col, Pagination, PaginationItem, PaginationLink, Row, Table } from 'reactstrap';
Badge,
Row,
Col,
Card,
CardHeader,
CardBody,
Table,
Pagination,
PaginationItem,
PaginationLink
} from 'reactstrap';
class Tables extends Component { class Tables extends Component {
render() { render() {
@ -398,7 +386,7 @@ class Tables extends Component {
</Row> </Row>
</div> </div>
) );
} }
} }

22
src/views/Base/Tabs/Tabs.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from 'reactstrap'; import { Badge, Col, Nav, NavItem, NavLink, Row, TabContent, TabPane } from 'reactstrap';
import classnames from 'classnames'; import classnames from 'classnames';
class Tabs extends Component { class Tabs extends Component {
@ -9,14 +9,14 @@ class Tabs extends Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
activeTab: '1' activeTab: '1',
}; };
} }
toggle(tab) { toggle(tab) {
if (this.state.activeTab !== tab) { if (this.state.activeTab !== tab) {
this.setState({ this.setState({
activeTab: tab activeTab: tab,
}); });
} }
} }
@ -134,7 +134,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '1' })} className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }} onClick={() => { this.toggle('1'); }}
> >
<i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator</span> <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator</span>
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
@ -143,7 +143,7 @@ class Tabs extends Component {
onClick={() => { this.toggle('2'); }} onClick={() => { this.toggle('2'); }}
> >
<i className="icon-basket-loaded"></i> <span <i className="icon-basket-loaded"></i> <span
className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart</span> className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart</span>
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
@ -151,7 +151,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '3' })} className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }} onClick={() => { this.toggle('3'); }}
> >
<i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span> <i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
</NavLink> </NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
@ -186,7 +186,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '1' })} className={classnames({ active: this.state.activeTab === '1' })}
onClick={() => { this.toggle('1'); }} onClick={() => { this.toggle('1'); }}
> >
<i className="icon-calculator"></i> <span className={ this.state.activeTab === '1' ? "" : "d-none"}> Calculator </span>{'\u00A0'}<Badge <i className="icon-calculator"></i> <span className={this.state.activeTab === '1' ? '' : 'd-none'}> Calculator </span>{'\u00A0'}<Badge
color="success">New</Badge> color="success">New</Badge>
</NavLink> </NavLink>
</NavItem> </NavItem>
@ -196,7 +196,7 @@ class Tabs extends Component {
onClick={() => { this.toggle('2'); }} onClick={() => { this.toggle('2'); }}
> >
<i className="icon-basket-loaded"></i> <span <i className="icon-basket-loaded"></i> <span
className={ this.state.activeTab === '2' ? "" : "d-none"}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge> className={this.state.activeTab === '2' ? '' : 'd-none'}> Shopping cart </span>{'\u00A0'}<Badge pill color="danger">29</Badge>
</NavLink> </NavLink>
</NavItem> </NavItem>
<NavItem> <NavItem>
@ -204,7 +204,7 @@ class Tabs extends Component {
className={classnames({ active: this.state.activeTab === '3' })} className={classnames({ active: this.state.activeTab === '3' })}
onClick={() => { this.toggle('3'); }} onClick={() => { this.toggle('3'); }}
> >
<i className="icon-pie-chart"></i> <span className={ this.state.activeTab === '3' ? "" : "d-none"}> Charts</span> <i className="icon-pie-chart"></i> <span className={this.state.activeTab === '3' ? '' : 'd-none'}> Charts</span>
</NavLink> </NavLink>
</NavItem> </NavItem>
</Nav> </Nav>
@ -234,7 +234,7 @@ class Tabs extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

49
src/views/Base/Tooltips/Tooltips.js
View File

@ -1,11 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import { import { Button, Card, CardBody, CardHeader, Tooltip, UncontrolledTooltip } from 'reactstrap';
Card,
CardHeader,
CardBody,
Tooltip, UncontrolledTooltip,
Button
} from 'reactstrap';
class TooltipItem extends React.Component { class TooltipItem extends React.Component {
constructor(props) { constructor(props) {
@ -13,13 +7,13 @@ class TooltipItem extends React.Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
tooltipOpen: false tooltipOpen: false,
}; };
} }
toggle() { toggle() {
this.setState({ this.setState({
tooltipOpen: !this.state.tooltipOpen tooltipOpen: !this.state.tooltipOpen,
}); });
} }
@ -48,21 +42,21 @@ class Tooltips extends Component {
tooltips: [ tooltips: [
{ {
placement: 'top', placement: 'top',
text: 'Top' text: 'Top',
}, },
{ {
placement: 'bottom', placement: 'bottom',
text: 'Bottom' text: 'Bottom',
}, },
{ {
placement: 'left', placement: 'left',
text: 'Left' text: 'Left',
}, },
{ {
placement: 'right', placement: 'right',
text: 'Right' text: 'Right',
} },
] ],
}; };
} }
@ -71,53 +65,56 @@ class Tooltips extends Component {
return (index === i ? !element : false); return (index === i ? !element : false);
}); });
this.setState({ this.setState({
tooltipOpen: newArray tooltipOpen: newArray,
}); });
} }
render() { render() {
return ( return (
<div className="animated fadeIn"> <div className="animated fadeIn">
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltips</strong> <i className="fa fa-align-justify"></i><strong>Tooltips</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/tooltips/" target="_blank"> <a href="https://reactstrap.github.io/components/tooltips/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p> <p>Somewhere in here is a <a href="#" id="TooltipExample">tooltip</a>.</p>
<Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0)}}> <Tooltip placement="right" isOpen={this.state.tooltipOpen[0]} target="TooltipExample" toggle={() => {this.toggle(0);}}>
Hello world! Hello world!
</Tooltip> </Tooltip>
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> disable autohide</small> <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> disable autohide</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<p>Sometimes you need to allow users to select text within a <a href="#" id="DisabledAutoHideExample">tooltip</a>.</p> <p>Sometimes you need to allow users to select text within a <a href="#" id="DisabledAutoHideExample">tooltip</a>.</p>
<Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1)}}> <Tooltip placement="top" isOpen={this.state.tooltipOpen[1]} autohide={false} target="DisabledAutoHideExample" toggle={() => {this.toggle(1);}}>
Try to select this text! Try to select this text!
</Tooltip> </Tooltip>
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> list</small> <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> list</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
{ this.state.tooltips.map((tooltip, i) => { {this.state.tooltips.map((tooltip, i) => {
return <TooltipItem key={i} item={tooltip} id={i} />; return <TooltipItem key={i} item={tooltip} id={i} />;
})} })}
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Tooltip</strong><small> uncontrolled</small> <i className="fa fa-align-justify"></i><strong>Tooltip</strong>
<small> uncontrolled</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p> <p>Somewhere in here is a <a href="#" id="UncontrolledTooltipExample">tooltip</a>.</p>

22
src/views/Base/index.js Normal file
View File

@ -0,0 +1,22 @@
import Breadcrumbs from './Breadcrumbs';
import Cards from './Cards';
import Carousels from './Carousels';
import Collapses from './Collapses';
import Dropdowns from './Dropdowns';
import Forms from './Forms';
import Jumbotrons from './Jumbotrons';
import ListGroups from './ListGroups';
import Navbars from './Navbars';
import Navs from './Navs';
import Popovers from './Popovers';
import Paginations from './Paginations';
import ProgressBar from './ProgressBar';
import Switches from './Switches';
import Tables from './Tables';
import Tabs from './Tabs';
import Tooltips from './Tooltips';
export {
Breadcrumbs, Cards, Carousels, Collapses, Dropdowns, Forms, Jumbotrons, ListGroups, Navbars, Navs, Popovers, ProgressBar, Switches, Tables, Tabs, Tooltips, Paginations
};

52
src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, CardFooter, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button } from 'reactstrap'; import { Button, ButtonDropdown, Card, CardBody, CardHeader, Col, DropdownItem, DropdownMenu, DropdownToggle, Row } from 'reactstrap';
class ButtonDropdowns extends Component { class ButtonDropdowns extends Component {
@ -8,14 +8,14 @@ class ButtonDropdowns extends Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
dropdownOpen: new Array(16).fill(false) dropdownOpen: new Array(16).fill(false),
}; };
} }
toggle(i) { toggle(i) {
const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); }); const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
this.setState({ this.setState({
dropdownOpen: newArray dropdownOpen: newArray,
}); });
} }
@ -27,8 +27,8 @@ class ButtonDropdowns extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropdown</strong> <i className="fa fa-align-justify"></i><strong>Button Dropdown</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-dropdown/" target="_blank"> <a href="https://reactstrap.github.io/components/button-dropdown/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -61,7 +61,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -73,7 +73,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -85,7 +85,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -97,7 +97,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -109,7 +109,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -121,7 +121,7 @@ class ButtonDropdowns extends Component {
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -134,67 +134,67 @@ class ButtonDropdowns extends Component {
<CardBody> <CardBody>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[7]} toggle={() => { this.toggle(7); }}> <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[7]} toggle={() => { this.toggle(7); }}>
<Button id="caret" color="primary">Primary</Button> <Button id="caret" color="primary">Primary</Button>
<DropdownToggle caret color="primary"/> <DropdownToggle caret color="primary" />
<DropdownMenu> <DropdownMenu>
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[8]} toggle={() => { this.toggle(8); }}> <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[8]} toggle={() => { this.toggle(8); }}>
<Button id="caret" color="secondary">Secondary</Button> <Button id="caret" color="secondary">Secondary</Button>
<DropdownToggle caret color="secondary"/> <DropdownToggle caret color="secondary" />
<DropdownMenu> <DropdownMenu>
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[9]} toggle={() => { this.toggle(9); }}> <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[9]} toggle={() => { this.toggle(9); }}>
<Button id="caret" color="success">Success</Button> <Button id="caret" color="success">Success</Button>
<DropdownToggle caret color="success"/> <DropdownToggle caret color="success" />
<DropdownMenu> <DropdownMenu>
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[10]} toggle={() => { this.toggle(10); }}> <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[10]} toggle={() => { this.toggle(10); }}>
<Button id="caret" color="info">Info</Button> <Button id="caret" color="info">Info</Button>
<DropdownToggle caret color="info"/> <DropdownToggle caret color="info" />
<DropdownMenu> <DropdownMenu>
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[11]} toggle={() => { this.toggle(11); }}> <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[11]} toggle={() => { this.toggle(11); }}>
<Button id="caret" color="warning">Warning</Button> <Button id="caret" color="warning">Warning</Button>
<DropdownToggle caret color="warning"/> <DropdownToggle caret color="warning" />
<DropdownMenu> <DropdownMenu>
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[12]} toggle={() => { this.toggle(12); }}> <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[12]} toggle={() => { this.toggle(12); }}>
<Button id="caret" color="danger">Danger</Button> <Button id="caret" color="danger">Danger</Button>
<DropdownToggle caret color="danger"/> <DropdownToggle caret color="danger" />
<DropdownMenu> <DropdownMenu>
<DropdownItem header>Header</DropdownItem> <DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem> <DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem> <DropdownItem>Action</DropdownItem>
<DropdownItem divider/> <DropdownItem divider />
<DropdownItem>Another Action</DropdownItem> <DropdownItem>Another Action</DropdownItem>
</DropdownMenu> </DropdownMenu>
</ButtonDropdown> </ButtonDropdown>
@ -235,7 +235,7 @@ class ButtonDropdowns extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<ButtonDropdown dropup className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}> <ButtonDropdown dropup className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
<DropdownToggle caret caret size="lg"> <DropdownToggle caret size="lg">
Dropup Dropup
</DropdownToggle> </DropdownToggle>
<DropdownMenu> <DropdownMenu>
@ -250,7 +250,7 @@ class ButtonDropdowns extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

38
src/views/Buttons/ButtonGroups/ButtonGroups.js
View File

@ -1,5 +1,22 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem, Button, ButtonGroup, ButtonToolbar, Input, InputGroup, InputGroupAddon, InputGroupText } from 'reactstrap'; import {
Button,
ButtonDropdown,
ButtonGroup,
ButtonToolbar,
Card,
CardBody,
CardHeader,
Col,
DropdownItem,
DropdownMenu,
DropdownToggle,
Input,
InputGroup,
InputGroupAddon,
InputGroupText,
Row,
} from 'reactstrap';
class ButtonGroups extends Component { class ButtonGroups extends Component {
@ -8,14 +25,14 @@ class ButtonGroups extends Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
dropdownOpen: new Array(2).fill(false) dropdownOpen: new Array(2).fill(false),
}; };
} }
toggle(i) { toggle(i) {
const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); }); const newArray = this.state.dropdownOpen.map((element, index) => { return (index === i ? !element : false); });
this.setState({ this.setState({
dropdownOpen: newArray dropdownOpen: newArray,
}); });
} }
@ -27,8 +44,8 @@ class ButtonGroups extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Group</strong> <i className="fa fa-align-justify"></i><strong>Button Group</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/button-group/" target="_blank"> <a href="https://reactstrap.github.io/components/button-group/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -66,7 +83,8 @@ class ButtonGroups extends Component {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Toolbar</strong> <small>mix with input groups</small> <i className="fa fa-align-justify"></i><strong>Button Toolbar</strong>
<small>mix with input groups</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<ButtonToolbar className="mb-3"> <ButtonToolbar className="mb-3">
@ -105,13 +123,13 @@ class ButtonGroups extends Component {
<Button>Middle</Button> <Button>Middle</Button>
<Button>Right</Button> <Button>Right</Button>
</ButtonGroup> </ButtonGroup>
<hr/> <hr />
<ButtonGroup> <ButtonGroup>
<Button>Left</Button> <Button>Left</Button>
<Button>Middle</Button> <Button>Middle</Button>
<Button>Right</Button> <Button>Right</Button>
</ButtonGroup> </ButtonGroup>
<hr/> <hr />
<ButtonGroup size="sm"> <ButtonGroup size="sm">
<Button>Left</Button> <Button>Left</Button>
<Button>Middle</Button> <Button>Middle</Button>
@ -162,7 +180,7 @@ class ButtonGroups extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

6
src/views/Buttons/Buttons/Buttons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap'; import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Buttons extends Component { class Buttons extends Component {
render() { render() {
@ -207,7 +207,7 @@ class Buttons extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

12
src/views/Buttons/SocialButtons/SocialButtons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap'; import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class SocialButtons extends Component { class SocialButtons extends Component {
render() { render() {
@ -11,7 +11,7 @@ class SocialButtons extends Component {
<CardHeader> <CardHeader>
<strong>Social Media Button</strong> <strong>Social Media Button</strong>
<small>Usage ex.</small> <small>Usage ex.</small>
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook"&gt;&lt;span&gt; <code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code> Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
@ -112,7 +112,7 @@ class SocialButtons extends Component {
<CardHeader> <CardHeader>
<strong>Social Media Button</strong> <strong>Social Media Button</strong>
<small>Only icons. Usage ex.</small> <small>Only icons. Usage ex.</small>
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt; <code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code> Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
@ -213,7 +213,7 @@ class SocialButtons extends Component {
<CardHeader> <CardHeader>
<strong>Social Media Button</strong> <strong>Social Media Button</strong>
<small>Only text. Usage ex.</small> <small>Only text. Usage ex.</small>
<code style={{textTransform: 'lowercase'}}>&lt;button className="btn-facebook text"&gt;&lt;span&gt; <code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook text"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code> Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
@ -311,7 +311,7 @@ class SocialButtons extends Component {
</Row> </Row>
</div> </div>
) );
} }
} }

8
src/views/Buttons/index.js Normal file
View File

@ -0,0 +1,8 @@
import ButtonDropdowns from './ButtonDropdowns';
import ButtonGroups from './ButtonGroups';
import Buttons from './Buttons';
import SocialButtons from './SocialButtons';
export {
ButtonDropdowns, ButtonGroups, Buttons, SocialButtons
}

157
src/views/Charts/Charts.js
View File

@ -1,6 +1,6 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Bar, Doughnut, Line, Pie, Polar, Radar} from 'react-chartjs-2'; import { Bar, Doughnut, Line, Pie, Polar, Radar } from 'react-chartjs-2';
import {CardColumns, Card, CardHeader, CardBody} from 'reactstrap'; import { Card, CardBody, CardColumns, CardHeader } from 'reactstrap';
const line = { const line = {
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'], labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
@ -24,9 +24,9 @@ const line = {
pointHoverBorderWidth: 2, pointHoverBorderWidth: 2,
pointRadius: 1, pointRadius: 1,
pointHitRadius: 10, pointHitRadius: 10,
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40],
} },
] ],
}; };
const bar = { const bar = {
@ -39,30 +39,31 @@ const bar = {
borderWidth: 1, borderWidth: 1,
hoverBackgroundColor: 'rgba(255,99,132,0.4)', hoverBackgroundColor: 'rgba(255,99,132,0.4)',
hoverBorderColor: 'rgba(255,99,132,1)', hoverBorderColor: 'rgba(255,99,132,1)',
data: [65, 59, 80, 81, 56, 55, 40] data: [65, 59, 80, 81, 56, 55, 40],
} },
] ],
}; };
const doughnut = { const doughnut = {
labels: [ labels: [
'Red', 'Red',
'Green', 'Green',
'Yellow' 'Yellow',
], ],
datasets: [{ datasets: [
data: [300, 50, 100], {
backgroundColor: [ data: [300, 50, 100],
'#FF6384', backgroundColor: [
'#36A2EB', '#FF6384',
'#FFCE56' '#36A2EB',
], '#FFCE56',
hoverBackgroundColor: [ ],
'#FF6384', hoverBackgroundColor: [
'#36A2EB', '#FF6384',
'#FFCE56' '#36A2EB',
] '#FFCE56',
}] ],
}],
}; };
const radar = { const radar = {
@ -76,7 +77,7 @@ const radar = {
pointBorderColor: '#fff', pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff', pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(179,181,198,1)', pointHoverBorderColor: 'rgba(179,181,198,1)',
data: [65, 59, 90, 81, 56, 55, 40] data: [65, 59, 90, 81, 56, 55, 40],
}, },
{ {
label: 'My Second dataset', label: 'My Second dataset',
@ -86,57 +87,59 @@ const radar = {
pointBorderColor: '#fff', pointBorderColor: '#fff',
pointHoverBackgroundColor: '#fff', pointHoverBackgroundColor: '#fff',
pointHoverBorderColor: 'rgba(255,99,132,1)', pointHoverBorderColor: 'rgba(255,99,132,1)',
data: [28, 48, 40, 19, 96, 27, 100] data: [28, 48, 40, 19, 96, 27, 100],
} },
] ],
}; };
const pie = { const pie = {
labels: [ labels: [
'Red', 'Red',
'Green', 'Green',
'Yellow' 'Yellow',
], ],
datasets: [{ datasets: [
data: [300, 50, 100], {
backgroundColor: [ data: [300, 50, 100],
'#FF6384', backgroundColor: [
'#36A2EB', '#FF6384',
'#FFCE56' '#36A2EB',
], '#FFCE56',
hoverBackgroundColor: [ ],
'#FF6384', hoverBackgroundColor: [
'#36A2EB', '#FF6384',
'#FFCE56' '#36A2EB',
] '#FFCE56',
}] ],
}],
}; };
const polar = { const polar = {
datasets: [{ datasets: [
data: [ {
11, data: [
16, 11,
7, 16,
3, 7,
14 3,
], 14,
backgroundColor: [ ],
'#FF6384', backgroundColor: [
'#4BC0C0', '#FF6384',
'#FFCE56', '#4BC0C0',
'#E7E9ED', '#FFCE56',
'#36A2EB' '#E7E9ED',
], '#36A2EB',
label: 'My dataset' // for legend ],
}], label: 'My dataset' // for legend
}],
labels: [ labels: [
'Red', 'Red',
'Green', 'Green',
'Yellow', 'Yellow',
'Grey', 'Grey',
'Blue' 'Blue',
] ],
}; };
class Charts extends Component { class Charts extends Component {
@ -147,7 +150,7 @@ class Charts extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
Line Chart Line Chart
<div className="card-actions"> <div className="card-header-actions">
<a href="http://www.chartjs.org"> <a href="http://www.chartjs.org">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
@ -155,18 +158,14 @@ class Charts extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="chart-wrapper"> <div className="chart-wrapper">
<Line data={line} <Line data={line} options={{ maintainAspectRatio: false, }} />
options={{
maintainAspectRatio: false
}}
/>
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
Bar Chart Bar Chart
<div className="card-actions"> <div className="card-header-actions">
<a href="http://www.chartjs.org"> <a href="http://www.chartjs.org">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
@ -174,18 +173,14 @@ class Charts extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="chart-wrapper"> <div className="chart-wrapper">
<Bar data={bar} <Bar data={bar} options={{ maintainAspectRatio: false, }} />
options={{
maintainAspectRatio: false
}}
/>
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
Doughnut Chart Doughnut Chart
<div className="card-actions"> <div className="card-header-actions">
<a href="http://www.chartjs.org"> <a href="http://www.chartjs.org">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
@ -193,14 +188,14 @@ class Charts extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="chart-wrapper"> <div className="chart-wrapper">
<Doughnut data={doughnut}/> <Doughnut data={doughnut} />
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
Radar Chart Radar Chart
<div className="card-actions"> <div className="card-header-actions">
<a href="http://www.chartjs.org"> <a href="http://www.chartjs.org">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
@ -208,14 +203,14 @@ class Charts extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="chart-wrapper"> <div className="chart-wrapper">
<Radar data={radar}/> <Radar data={radar} />
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
Pie Chart Pie Chart
<div className="card-actions"> <div className="card-header-actions">
<a href="http://www.chartjs.org"> <a href="http://www.chartjs.org">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
@ -223,14 +218,14 @@ class Charts extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="chart-wrapper"> <div className="chart-wrapper">
<Pie data={pie}/> <Pie data={pie} />
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
Polar Area Chart Polar Area Chart
<div className="card-actions"> <div className="card-header-actions">
<a href="http://www.chartjs.org"> <a href="http://www.chartjs.org">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
@ -238,13 +233,13 @@ class Charts extends Component {
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<div className="chart-wrapper"> <div className="chart-wrapper">
<Polar data={polar}/> <Polar data={polar} />
</div> </div>
</CardBody> </CardBody>
</Card> </Card>
</CardColumns> </CardColumns>
</div> </div>
) );
} }
} }

1057
src/views/Dashboard/Dashboard.js
View File

File diff suppressed because it is too large Load Diff

10
src/views/Icons/Flags/Flags.js
View File

@ -1,6 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap'; import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Flags extends Component { class Flags extends Component {
render() { render() {
@ -13,7 +12,8 @@ class Flags extends Component {
<CardBody> <CardBody>
<Row className="text-center"> <Row className="text-center">
<Col className="mb-5 text-left" xs="12"> <Col className="mb-5 text-left" xs="12">
For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2 code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well. For using the flags inline with text add the classes <code>.flag-icon</code> and <code>.flag-icon-xx</code> (where xx is the ISO 3166-1-alpha-2
code of a country) to an empty span. If you want to have a squared version flag then add the class flag-icon-squared as well.
</Col> </Col>
<Col className="mb-5" xs="3" sm="2"> <Col className="mb-5" xs="3" sm="2">
<i className="flag-icon flag-icon-ad h1" title="ad" id="ad"></i> <i className="flag-icon flag-icon-ad h1" title="ad" id="ad"></i>
@ -1015,7 +1015,7 @@ class Flags extends Component {
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
) );
} }
} }

1775
src/views/Icons/FontAwesome/FontAwesome.js
View File

File diff suppressed because it is too large Load Diff

6
src/views/Icons/SimpleLineIcons/SimpleLineIcons.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap'; import { Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class SimpleLineIcons extends Component { class SimpleLineIcons extends Component {
render() { render() {
@ -748,7 +748,7 @@ class SimpleLineIcons extends Component {
</CardBody> </CardBody>
</Card> </Card>
</div> </div>
) );
} }
} }

7
src/views/Icons/index.js Normal file
View File

@ -0,0 +1,7 @@
import Flags from './Flags';
import FontAwesome from './FontAwesome';
import SimpleLineIcons from './SimpleLineIcons';
export {
Flags, FontAwesome, SimpleLineIcons
};

21
src/views/Notifications/Alerts/Alerts.js
View File

@ -1,12 +1,12 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, Alert} from 'reactstrap'; import { Alert, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class Alerts extends Component { class Alerts extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
visible: true visible: true,
}; };
this.onDismiss = this.onDismiss.bind(this); this.onDismiss = this.onDismiss.bind(this);
@ -24,8 +24,8 @@ class Alerts extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong> <i className="fa fa-align-justify"></i><strong>Alerts</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/alerts/" target="_blank"> <a href="https://reactstrap.github.io/components/alerts/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -61,7 +61,8 @@ class Alerts extends Component {
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong><small> use <code>.alert-link</code> to provide links</small> <i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small> use <code>.alert-link</code> to provide links</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Alert color="primary"> <Alert color="primary">
@ -96,7 +97,8 @@ class Alerts extends Component {
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong> <small>additional content</small> <i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small>additional content</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Alert color="success"> <Alert color="success">
@ -117,7 +119,8 @@ class Alerts extends Component {
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Alerts</strong> <small>dismissing</small> <i className="fa fa-align-justify"></i><strong>Alerts</strong>
<small>dismissing</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}> <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
@ -128,7 +131,7 @@ class Alerts extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

21
src/views/Notifications/Badges/Badges.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Card, CardHeader, CardBody, CardFooter, Badge, Button} from 'reactstrap'; import { Badge, Button, Card, CardBody, CardFooter, CardHeader, Col, Row } from 'reactstrap';
class Badges extends Component { class Badges extends Component {
render() { render() {
@ -10,8 +10,8 @@ class Badges extends Component {
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <i className="fa fa-align-justify"></i><strong>Badges</strong>
<div className="card-actions"> <div className="card-header-actions">
<a href="https://reactstrap.github.io/components/badge/" target="_blank"> <a href="https://reactstrap.github.io/components/badge/" rel="noreferrer noopener" target="_blank">
<small className="text-muted">docs</small> <small className="text-muted">docs</small>
</a> </a>
</div> </div>
@ -26,7 +26,7 @@ class Badges extends Component {
</CardBody> </CardBody>
<CardFooter> <CardFooter>
<Button color="primary" outline> <Button color="primary" outline>
Notifications <Badge color="secondary" style={{position: 'static'}}>4</Badge> Notifications <Badge color="secondary" style={{ position: 'static' }}>4</Badge>
</Button> </Button>
</CardFooter> </CardFooter>
</Card> </Card>
@ -34,7 +34,8 @@ class Badges extends Component {
<Col xs="12" md="6"> <Col xs="12" md="6">
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>contextual variations</small> <i className="fa fa-align-justify"></i><strong>Badges</strong>
<small>contextual variations</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Badge className="mr-1" color="primary">Primary</Badge> <Badge className="mr-1" color="primary">Primary</Badge>
@ -49,7 +50,8 @@ class Badges extends Component {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>pill badges</small> <i className="fa fa-align-justify"></i><strong>Badges</strong>
<small>pill badges</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Badge className="mr-1" color="primary" pill>Primary</Badge> <Badge className="mr-1" color="primary" pill>Primary</Badge>
@ -64,7 +66,8 @@ class Badges extends Component {
</Card> </Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Badges</strong> <small>links</small> <i className="fa fa-align-justify"></i><strong>Badges</strong>
<small>links</small>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Badge className="mr-1" href="#" color="primary">Primary</Badge> <Badge className="mr-1" href="#" color="primary">Primary</Badge>
@ -80,7 +83,7 @@ class Badges extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

27
src/views/Notifications/Modals/Modals.js
View File

@ -1,6 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody} from 'reactstrap'; import { Button, Card, CardBody, CardHeader, Col, Modal, ModalBody, ModalFooter, ModalHeader, Row } from 'reactstrap';
class Modals extends Component { class Modals extends Component {
@ -14,7 +13,7 @@ class Modals extends Component {
success: false, success: false,
warning: false, warning: false,
danger: false, danger: false,
info: false info: false,
}; };
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
@ -29,49 +28,49 @@ class Modals extends Component {
toggle() { toggle() {
this.setState({ this.setState({
modal: !this.state.modal modal: !this.state.modal,
}); });
} }
toggleLarge() { toggleLarge() {
this.setState({ this.setState({
large: !this.state.large large: !this.state.large,
}); });
} }
toggleSmall() { toggleSmall() {
this.setState({ this.setState({
small: !this.state.small small: !this.state.small,
}); });
} }
togglePrimary() { togglePrimary() {
this.setState({ this.setState({
primary: !this.state.primary primary: !this.state.primary,
}); });
} }
toggleSuccess() { toggleSuccess() {
this.setState({ this.setState({
success: !this.state.success success: !this.state.success,
}); });
} }
toggleWarning() { toggleWarning() {
this.setState({ this.setState({
warning: !this.state.warning warning: !this.state.warning,
}); });
} }
toggleDanger() { toggleDanger() {
this.setState({ this.setState({
danger: !this.state.danger danger: !this.state.danger,
}); });
} }
toggleInfo() { toggleInfo() {
this.setState({ this.setState({
info: !this.state.info info: !this.state.info,
}); });
} }
@ -135,7 +134,7 @@ class Modals extends Component {
</ModalFooter> </ModalFooter>
</Modal> </Modal>
<hr/> <hr />
<Button color="primary" onClick={this.togglePrimary}>Primary modal</Button> <Button color="primary" onClick={this.togglePrimary}>Primary modal</Button>
<Modal isOpen={this.state.primary} toggle={this.togglePrimary} <Modal isOpen={this.state.primary} toggle={this.togglePrimary}
@ -227,7 +226,7 @@ class Modals extends Component {
</Col> </Col>
</Row> </Row>
</div> </div>
) );
} }
} }

7
src/views/Notifications/index.js Normal file
View File

@ -0,0 +1,7 @@
import Alerts from './Alerts';
import Badges from './Badges';
import Modals from './Modals';
export {
Alerts, Badges, Modals
};

9
src/views/Pages/Login/Login.js
View File

@ -1,6 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap'; import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Login extends Component { class Login extends Component {
render() { render() {
@ -20,7 +19,7 @@ class Login extends Component {
<i className="icon-user"></i> <i className="icon-user"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" placeholder="Username"/> <Input type="text" placeholder="Username" />
</InputGroup> </InputGroup>
<InputGroup className="mb-4"> <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
@ -28,7 +27,7 @@ class Login extends Component {
<i className="icon-lock"></i> <i className="icon-lock"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="password" placeholder="Password"/> <Input type="password" placeholder="Password" />
</InputGroup> </InputGroup>
<Row> <Row>
<Col xs="6"> <Col xs="6">

6
src/views/Pages/Page404/Page404.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupText} from 'reactstrap'; import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Page404 extends Component { class Page404 extends Component {
render() { render() {
@ -19,7 +19,7 @@ class Page404 extends Component {
<i className="fa fa-search"></i> <i className="fa fa-search"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input size="16" type="text" placeholder="What are you looking for?"/> <Input size="16" type="text" placeholder="What are you looking for?" />
<InputGroupAddon addonType="append"> <InputGroupAddon addonType="append">
<Button color="info">Search</Button> <Button color="info">Search</Button>
</InputGroupAddon> </InputGroupAddon>

4
src/views/Pages/Page500/Page500.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap'; import { Button, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Page500 extends Component { class Page500 extends Component {
render() { render() {

12
src/views/Pages/Register/Register.js
View File

@ -1,5 +1,5 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon, InputGroupText} from 'reactstrap'; import { Button, Card, CardBody, CardFooter, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row } from 'reactstrap';
class Register extends Component { class Register extends Component {
render() { render() {
@ -18,13 +18,13 @@ class Register extends Component {
<i className="icon-user"></i> <i className="icon-user"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" placeholder="Username"/> <Input type="text" placeholder="Username" />
</InputGroup> </InputGroup>
<InputGroup className="mb-3"> <InputGroup className="mb-3">
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
<InputGroupText>@</InputGroupText> <InputGroupText>@</InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="text" placeholder="Email"/> <Input type="text" placeholder="Email" />
</InputGroup> </InputGroup>
<InputGroup className="mb-3"> <InputGroup className="mb-3">
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
@ -32,7 +32,7 @@ class Register extends Component {
<i className="icon-lock"></i> <i className="icon-lock"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="password" placeholder="Password"/> <Input type="password" placeholder="Password" />
</InputGroup> </InputGroup>
<InputGroup className="mb-4"> <InputGroup className="mb-4">
<InputGroupAddon addonType="prepend"> <InputGroupAddon addonType="prepend">
@ -40,7 +40,7 @@ class Register extends Component {
<i className="icon-lock"></i> <i className="icon-lock"></i>
</InputGroupText> </InputGroupText>
</InputGroupAddon> </InputGroupAddon>
<Input type="password" placeholder="Repeat password"/> <Input type="password" placeholder="Repeat password" />
</InputGroup> </InputGroup>
<Button color="success" block>Create Account</Button> <Button color="success" block>Create Account</Button>
</CardBody> </CardBody>

8
src/views/Pages/index.js Normal file
View File

@ -0,0 +1,8 @@
import Login from './Login';
import Page404 from './Page404';
import Page500 from './Page500';
import Register from './Register';
export {
Login, Page404, Page500, Register
};

4
src/views/Theme/Colors/Colors.js
View File

@ -1,4 +1,4 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
class Colors extends Component { class Colors extends Component {
render() { render() {
@ -97,7 +97,7 @@ class Colors extends Component {
</div> </div>
</div> </div>
</div> </div>
) );
} }
} }

132
src/views/Theme/Typography/Typography.js
View File

@ -1,4 +1,4 @@
import React, {Component} from 'react'; import React, { Component } from 'react';
class Typography extends Component { class Typography extends Component {
render() { render() {
@ -12,48 +12,48 @@ class Typography extends Component {
<p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p> <p>Documentation and examples for Bootstrap typography, including global settings, headings, body text, lists, and more.</p>
<table className="table"> <table className="table">
<thead> <thead>
<tr> <tr>
<th>Heading</th> <th>Heading</th>
<th>Example</th> <th>Example</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p> <p><code className="highlighter-rouge">&lt;h1&gt;&lt;/h1&gt;</code></p>
</td> </td>
<td><span className="h1">h1. Bootstrap heading</span></td> <td><span className="h1">h1. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p> <p><code className="highlighter-rouge">&lt;h2&gt;&lt;/h2&gt;</code></p>
</td> </td>
<td><span className="h2">h2. Bootstrap heading</span></td> <td><span className="h2">h2. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p> <p><code className="highlighter-rouge">&lt;h3&gt;&lt;/h3&gt;</code></p>
</td> </td>
<td><span className="h3">h3. Bootstrap heading</span></td> <td><span className="h3">h3. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p> <p><code className="highlighter-rouge">&lt;h4&gt;&lt;/h4&gt;</code></p>
</td> </td>
<td><span className="h4">h4. Bootstrap heading</span></td> <td><span className="h4">h4. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p> <p><code className="highlighter-rouge">&lt;h5&gt;&lt;/h5&gt;</code></p>
</td> </td>
<td><span className="h5">h5. Bootstrap heading</span></td> <td><span className="h5">h5. Bootstrap heading</span></td>
</tr> </tr>
<tr> <tr>
<td> <td>
<p><code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p> <p><code className="highlighter-rouge">&lt;h6&gt;&lt;/h6&gt;</code></p>
</td> </td>
<td><span className="h6">h6. Bootstrap heading</span></td> <td><span className="h6">h6. Bootstrap heading</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -63,7 +63,8 @@ class Typography extends Component {
Headings Headings
</div> </div>
<div className="card-body"> <div className="card-body">
<p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.</p> <p><code className="highlighter-rouge">.h1</code> through <code className="highlighter-rouge">.h6</code> classes are also available, for when you
want to match the font styling of a heading but cannot use the associated HTML element.</p>
<div className="bd-example"> <div className="bd-example">
<p className="h1">h1. Bootstrap heading</p> <p className="h1">h1. Bootstrap heading</p>
<p className="h2">h2. Bootstrap heading</p> <p className="h2">h2. Bootstrap heading</p>
@ -79,22 +80,23 @@ class Typography extends Component {
Display headings Display headings
</div> </div>
<div className="card-body"> <div className="card-body">
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p> <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<div className="bd-example bd-example-type"> <div className="bd-example bd-example-type">
<table className="table"> <table className="table">
<tbody> <tbody>
<tr> <tr>
<td><span className="display-1">Display 1</span></td> <td><span className="display-1">Display 1</span></td>
</tr> </tr>
<tr> <tr>
<td><span className="display-2">Display 2</span></td> <td><span className="display-2">Display 2</span></td>
</tr> </tr>
<tr> <tr>
<td><span className="display-3">Display 3</span></td> <td><span className="display-3">Display 3</span></td>
</tr> </tr>
<tr> <tr>
<td><span className="display-4">Display 4</span></td> <td><span className="display-4">Display 4</span></td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
@ -105,14 +107,21 @@ class Typography extends Component {
Inline text elements Inline text elements
</div> </div>
<div className="card-body"> <div className="card-body">
<p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p> <p>Traditional heading elements are designed to work best in the meat of your page content. When you need a heading to stand out, consider using
a <strong>display heading</strong>—a larger, slightly more opinionated heading style.</p>
<div className="bd-example"> <div className="bd-example">
<p>You can use the mark tag to <mark>highlight</mark> text.</p> <p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p> <p>
<del>This line of text is meant to be treated as deleted text.</del>
</p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p> <p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p> <p>
<ins>This line of text is meant to be treated as an addition to the document.</ins>
</p>
<p><u>This line of text will render as underlined</u></p> <p><u>This line of text will render as underlined</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p> <p>
<small>This line of text is meant to be treated as fine print.</small>
</p>
<p><strong>This line rendered as bold text.</strong></p> <p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p> <p><em>This line rendered as italicized text.</em></p>
</div> </div>
@ -123,7 +132,8 @@ class Typography extends Component {
Description list alignment Description list alignment
</div> </div>
<div className="card-body"> <div className="card-body">
<p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p> <p>Align terms and descriptions horizontally by using our grid system’s predefined classes (or semantic mixins). For longer terms, you can
optionally add a <code className="highlighter-rouge">.text-truncate</code> class to truncate the text with an ellipsis.</p>
<div className="bd-example"> <div className="bd-example">
<dl className="row"> <dl className="row">
<dt className="col-sm-3">Description lists</dt> <dt className="col-sm-3">Description lists</dt>
@ -153,7 +163,7 @@ class Typography extends Component {
</div> </div>
</div> </div>
</div> </div>
) );
} }
} }

6
src/views/Theme/index.js Normal file
View File

@ -0,0 +1,6 @@
import Colors from './Colors';
import Typography from './Typography';
export {
Colors, Typography,
};

Some files were not shown because too many files have changed in this diff Show More