React v16, Reactstrap v5
This commit is contained in:
xidedix
parent
6571acf95e
commit
5fef51f513
32
CHANGELOG.md
32
CHANGELOG.md
@ -1,24 +1,44 @@
|
|||||||
## Changelog [react](./REACT.md) version
|
## [react](./REACT.md) version `changelog`
|
||||||
|
|
||||||
##### 2017.08.24
|
###### `v1.0.1`
|
||||||
|
- moved to react: `^16.0.0`
|
||||||
|
- moved to reactstrap: `^5.0.0-alpha.3`
|
||||||
|
- moved to react-text-mask-hoc: `^0.10.4`
|
||||||
|
- moved from deprecated CardBlock to `CardBody` reactstrap component
|
||||||
|
- moved to `NavDropdown` in `Header` component
|
||||||
|
- fix for app-header navbar-nav dropdown-menu-right
|
||||||
|
- fix typo in Tables component PaginationItem
|
||||||
|
|
||||||
|
###### `v1.0.0`
|
||||||
|
- Sidebar component:
|
||||||
|
- item with optional class (_nav.js)
|
||||||
|
- nav link with optional variant (_nav.js)
|
||||||
|
- external urls allowed (_nav.js)
|
||||||
|
- optional SidebarFooter, SidebarHeader, SidebarForm components
|
||||||
|
- SidebarMinimizer component
|
||||||
|
- .brand-minimized
|
||||||
|
- .sidebar-minimized,
|
||||||
|
- Header component - sidebarMinimize
|
||||||
|
- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
|
||||||
|
|
||||||
|
###### `2017.08.24`
|
||||||
- webpack.config env.prod
|
- webpack.config env.prod
|
||||||
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
||||||
- callout.scss .chart-wrapper hotfix (full)
|
- callout.scss .chart-wrapper hotfix (full)
|
||||||
|
|
||||||
##### 2017.08.11
|
###### `2017.08.11`
|
||||||
- Bootstrap 4 beta
|
- Bootstrap 4 beta
|
||||||
- Dashboard component (full):
|
- Dashboard component (full):
|
||||||
- line chart for social box
|
- line chart for social box
|
||||||
- sparkline chart for callout
|
- sparkline chart for callout
|
||||||
|
|
||||||
##### 2017.08.01
|
###### `2017.08.01`
|
||||||
- Sidebar component:
|
- Sidebar component:
|
||||||
- title item with optional wrapper and class (_nav.js)
|
- title item with optional wrapper and class (_nav.js)
|
||||||
- nav link item with optional badge
|
- nav link item with optional badge
|
||||||
- code refactoring
|
- code refactoring
|
||||||
|
|
||||||
##### 2017.07.31
|
###### `2017.07.31`
|
||||||
- moved to [reactstrap](https://reactstrap.github.io/)
|
- moved to [reactstrap](https://reactstrap.github.io/)
|
||||||
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
||||||
- data driven Sidebar component (_nav.js)
|
- data driven Sidebar component (_nav.js)
|
||||||
|
|
||||||
|
|||||||
1
React_Full_Project/.gitignore
vendored
1
React_Full_Project/.gitignore
vendored
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
node_modules
|
node_modules
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
# testing
|
# testing
|
||||||
coverage
|
coverage
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
### Changelog [react](./REACT.md) version
|
|
||||||
|
|
||||||
#### 2017.08.26
|
|
||||||
- Sidebar component:
|
|
||||||
- item with optional class (_nav.js)
|
|
||||||
- nav link with optional variant (_nav.js)
|
|
||||||
- external urls allowed (_nav.js)
|
|
||||||
- optional SidebarFooter, SidebarHeader, SidebarForm components
|
|
||||||
- SidebarMinimizer component
|
|
||||||
- .brand-minimized
|
|
||||||
- .sidebar-minimized,
|
|
||||||
- Header component - sidebarMinimize
|
|
||||||
- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
|
|
||||||
|
|
||||||
#### 2017.08.24
|
|
||||||
- webpack.config env.prod
|
|
||||||
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
|
||||||
- callout.scss .chart-wrapper hotfix (full)
|
|
||||||
|
|
||||||
#### 2017.08.11
|
|
||||||
- Bootstrap 4 beta
|
|
||||||
- Dashboard component (full):
|
|
||||||
- line chart for social box
|
|
||||||
- sparkline chart for callout
|
|
||||||
|
|
||||||
#### 2017.08.01
|
|
||||||
- Sidebar component:
|
|
||||||
- title item with optional wrapper and class (_nav.js)
|
|
||||||
- nav link item with optional badge
|
|
||||||
- code refactoring
|
|
||||||
|
|
||||||
#### 2017.07.31
|
|
||||||
- moved to [reactstrap](https://reactstrap.github.io/)
|
|
||||||
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
|
||||||
- data driven Sidebar component (_nav.js)
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
# React version
|
|
||||||
|
|
||||||
## Intro
|
|
||||||
|
|
||||||
It uses Sass (with .scss). The style is loaded at the component level.
|
|
||||||
|
|
||||||
Dependencies can be handled by **npm**.
|
|
||||||
|
|
||||||
## Directories
|
|
||||||
|
|
||||||
```
|
|
||||||
src (js|jsx source)
|
|
||||||
scss (scss source)
|
|
||||||
public (html template)
|
|
||||||
public/img (images)
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
**npm i** - to install dependencies
|
|
||||||
|
|
||||||
## Sctipts
|
|
||||||
|
|
||||||
**npm start** for developing (it runs webpack-dev-server)
|
|
||||||
|
|
||||||
**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
|
|
||||||
|
|
||||||
[Changelog](./CHANGELOG.md)
|
|
||||||
[Readme](./README.md)
|
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@coreui/react",
|
"name": "@coreui/react",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"description": "",
|
"description": "",
|
||||||
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
||||||
"url": "http://coreui.io",
|
"url": "http://coreui.io",
|
||||||
@ -14,22 +14,22 @@
|
|||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||||
"babel-preset-env": "^1.6.0",
|
"babel-preset-env": "^1.6.0",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"copy-webpack-plugin": "^4.0.1",
|
"copy-webpack-plugin": "^4.1.1",
|
||||||
"css-hot-loader": "^1.3.1",
|
"css-hot-loader": "^1.3.2",
|
||||||
"css-loader": "^0.28.7",
|
"css-loader": "^0.28.7",
|
||||||
"extract-text-webpack-plugin": "^3.0.0",
|
"extract-text-webpack-plugin": "^3.0.1",
|
||||||
"file-loader": "^0.11.2",
|
"file-loader": "^1.1.5",
|
||||||
"html-loader": "^0.5.1",
|
"html-loader": "^0.5.1",
|
||||||
"html-webpack-plugin": "^2.30.1",
|
"html-webpack-plugin": "^2.30.1",
|
||||||
"node-sass": "^4.5.3",
|
"node-sass": "^4.5.3",
|
||||||
"rimraf": "^2.6.2",
|
"rimraf": "^2.6.2",
|
||||||
"sass-loader": "^6.0.6",
|
"sass-loader": "^6.0.6",
|
||||||
"source-list-map": "^2.0.0",
|
"source-list-map": "^2.0.0",
|
||||||
"style-loader": "^0.18.2",
|
"style-loader": "^0.19.0",
|
||||||
"uglify-js": "^3.1.1",
|
"uglify-js": "^3.1.3",
|
||||||
"url-loader": "^0.5.9",
|
"url-loader": "^0.6.2",
|
||||||
"webpack": "^3.6.0",
|
"webpack": "^3.6.0",
|
||||||
"webpack-dev-server": "^2.8.2"
|
"webpack-dev-server": "^2.9.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.0.0-beta",
|
"bootstrap": "^4.0.0-beta",
|
||||||
@ -37,12 +37,12 @@
|
|||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"history": "4.7.2",
|
"history": "4.7.2",
|
||||||
"is-url-external": "^1.0.3",
|
"is-url-external": "^1.0.3",
|
||||||
"react": "^15.6.1",
|
"react": "^16.0.0",
|
||||||
"react-chartjs-2": "2.6.2",
|
"react-chartjs-2": "2.6.4",
|
||||||
"react-dom": "^15.6.1",
|
"react-dom": "^16.0.0",
|
||||||
"react-router-dom": "4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-transition-group": "^1.2.0",
|
"react-transition-group": "^2.2.1",
|
||||||
"reactstrap": "^4.8.0",
|
"reactstrap": "^5.0.0-alpha.3",
|
||||||
"simple-line-icons": "^2.4.1"
|
"simple-line-icons": "^2.4.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
// Temp fix for reactstrap
|
// Temp fix for reactstrap
|
||||||
.show {
|
.app-header {
|
||||||
> .dropdown-menu-right {
|
.navbar-nav {
|
||||||
right: 0;
|
.dropdown-menu-right {
|
||||||
left: auto; // Reset the default from `.dropdown-menu`
|
right: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,8 +1,9 @@
|
|||||||
.app-footer {
|
.app-footer {
|
||||||
min-height: $footer-height;
|
display: flex;
|
||||||
padding: 0 $spacer;
|
padding: 0 $spacer;
|
||||||
line-height: $footer-height;
|
|
||||||
color: $footer-color;
|
color: $footer-color;
|
||||||
background: $footer-bg;
|
background: $footer-bg;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
@include borders($footer-borders);
|
@include borders($footer-borders);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,8 +11,8 @@
|
|||||||
app-dashboard,
|
app-dashboard,
|
||||||
app-root {
|
app-root {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header {
|
.app-header {
|
||||||
@ -26,12 +26,12 @@ app-root {
|
|||||||
.app-body {
|
.app-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-grow: 1;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@ -328,7 +328,8 @@ app-root {
|
|||||||
margin-top: $navbar-height;
|
margin-top: $navbar-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar,
|
||||||
|
.sidebar-fixed .sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.app-header.navbar {
|
.app-header.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: row;
|
|
||||||
height: $navbar-height;
|
height: $navbar-height;
|
||||||
|
flex-direction: row;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $navbar-bg;
|
background-color: $navbar-bg;
|
||||||
@ -102,13 +102,16 @@
|
|||||||
background-color: rgba(0,0,0,.075);
|
background-color: rgba(0,0,0,.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-minimized {
|
@include media-breakpoint-up(lg) {
|
||||||
.app-header.navbar {
|
.brand-minimized {
|
||||||
.navbar-brand {
|
.app-header.navbar {
|
||||||
width: $navbar-brand-minimized-width;
|
.navbar-brand {
|
||||||
background-color: $navbar-brand-minimized-bg;
|
width: $navbar-brand-minimized-width;
|
||||||
background-image: $navbar-brand-minimized-logo;
|
background-color: $navbar-brand-minimized-bg;
|
||||||
background-size: $navbar-brand-minimized-logo-size;
|
background-image: $navbar-brand-minimized-logo;
|
||||||
|
background-size: $navbar-brand-minimized-logo-size;
|
||||||
|
@include borders($navbar-brand-minimized-border);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -78,8 +78,8 @@
|
|||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
@ -254,6 +254,7 @@
|
|||||||
flex: 0 0 $sidebar-footer-height;
|
flex: 0 0 $sidebar-footer-height;
|
||||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
||||||
background: $sidebar-footer-bg;
|
background: $sidebar-footer-bg;
|
||||||
|
@include borders($sidebar-footer-borders);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-minimizer {
|
.sidebar-minimizer {
|
||||||
@ -261,6 +262,7 @@
|
|||||||
flex: 0 0 $sidebar-minimizer-height;
|
flex: 0 0 $sidebar-minimizer-height;
|
||||||
background-color: $sidebar-minimizer-bg;
|
background-color: $sidebar-minimizer-bg;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@include borders($sidebar-minimizer-borders);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -58,10 +58,11 @@ $navbar-brand-border: (
|
|||||||
)
|
)
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
$navbar-brand-minimized-width: 50px !default
|
$navbar-brand-minimized-width: 50px !default;
|
||||||
$navbar-brand-minimized-bg: #fff !default;
|
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
|
||||||
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
||||||
$navbar-brand-minimized-logo-size: 24px !default;
|
$navbar-brand-minimized-logo-size: 24px !default;
|
||||||
|
$navbar-brand-minimized-border: $navbar-brand-border !default;
|
||||||
|
|
||||||
$navbar-color: $gray-600 !default;
|
$navbar-color: $gray-600 !default;
|
||||||
$navbar-hover-color: $gray-800 !default;
|
$navbar-hover-color: $gray-800 !default;
|
||||||
@ -132,11 +133,13 @@ $sidebar-footer-height: auto !default;
|
|||||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||||
$sidebar-footer-padding-y: .75rem !default;
|
$sidebar-footer-padding-y: .75rem !default;
|
||||||
$sidebar-footer-padding-x: 1rem !default;
|
$sidebar-footer-padding-x: 1rem !default;
|
||||||
|
$sidebar-footer-borders: 0 !default;
|
||||||
|
|
||||||
// Sidebar Minimizer
|
// Sidebar Minimizer
|
||||||
|
|
||||||
$sidebar-minimizer-height: 50px !default;
|
$sidebar-minimizer-height: 50px !default;
|
||||||
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
||||||
|
$sidebar-minimizer-borders: 0 !default;
|
||||||
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
||||||
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
/*!
|
/*!
|
||||||
* CoreUI - Open Source Bootstrap Admin Template
|
* CoreUI - Open Source Bootstrap Admin Template
|
||||||
* @version v1.0.0
|
* @version v1.0.1
|
||||||
* @link http://coreui.io
|
* @link http://coreui.io
|
||||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||||
* @license MIT
|
* @license MIT
|
||||||
@ -11,23 +11,17 @@
|
|||||||
// Import Bootstrap source files
|
// Import Bootstrap source files
|
||||||
@import "bootstrap/bootstrap";
|
@import "bootstrap/bootstrap";
|
||||||
|
|
||||||
// If you want you can import bootstrap scss files directly from node_modules or bower_components.
|
// If you want you can import bootstrap scss files directly from node_modules.
|
||||||
// To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
|
// To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
|
||||||
|
|
||||||
// Import Bootstrap source files from node_modules
|
// Import Bootstrap source files from node_modules
|
||||||
// @import "node_modules/bootstrap/scss/bootstrap";
|
// @import "node_modules/bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
// Import Bootstrap source files from bower_components
|
|
||||||
// @import "bower_components/bootstrap/scss/bootstrap";
|
|
||||||
|
|
||||||
// Override core variables
|
// Override core variables
|
||||||
@import "core-variables";
|
@import "core-variables";
|
||||||
|
|
||||||
// Import core styles
|
// Import core styles
|
||||||
@import "core/core";
|
@import "core/core";
|
||||||
|
|
||||||
// Import vendors styles
|
|
||||||
@import "vendors/vendors";
|
|
||||||
|
|
||||||
// Custom styles
|
// Custom styles
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|||||||
9
React_Full_Project/scss/vendors/_variables.scss
vendored
Normal file
9
React_Full_Project/scss/vendors/_variables.scss
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// @import "node_modules/bootstrap/scss/bootstrap/functions";
|
||||||
|
@import "../bootstrap/functions";
|
||||||
|
@import "../bootstrap-variables";
|
||||||
|
// @import "node_modules/bootstrap/scss/bootstrap/variables";
|
||||||
|
@import "../bootstrap/variables";
|
||||||
|
// @import "node_modules/bootstrap/scss/bootstrap/mixins";
|
||||||
|
@import "../bootstrap/mixins";
|
||||||
|
@import "../core-variables";
|
||||||
|
@import "../core/variables";
|
||||||
@ -1 +0,0 @@
|
|||||||
@import "chart.js/chart";
|
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
// Import variables
|
||||||
|
@import '../variables';
|
||||||
|
|
||||||
.chart-legend,
|
.chart-legend,
|
||||||
.bar-legend,
|
.bar-legend,
|
||||||
.line-legend,
|
.line-legend,
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Aside",
|
"name": "Aside",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Aside.js"
|
"main": "./Aside.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Breadcrumb",
|
"name": "Breadcrumb",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Breadcrumb.js"
|
"main": "./Breadcrumb.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,8 +4,8 @@ class Footer extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<footer className="app-footer">
|
<footer className="app-footer">
|
||||||
<a href="http://coreui.io">CoreUI</a> © 2017 creativeLabs.
|
<span><a href="http://coreui.io">CoreUI</a> © 2017 creativeLabs.</span>
|
||||||
<span className="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
<span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Footer",
|
"name": "Footer",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Footer.js"
|
"main": "./Footer.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +1,6 @@
|
|||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import {
|
import {
|
||||||
Badge,
|
Badge, DropdownItem, DropdownMenu, DropdownToggle, Nav, NavbarBrand, NavbarToggler, NavDropdown, NavItem, NavLink
|
||||||
Dropdown,
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownItem,
|
|
||||||
Nav,
|
|
||||||
NavItem,
|
|
||||||
NavLink,
|
|
||||||
NavbarToggler,
|
|
||||||
NavbarBrand,
|
|
||||||
DropdownToggle
|
|
||||||
} from 'reactstrap';
|
} from 'reactstrap';
|
||||||
|
|
||||||
class Header extends Component {
|
class Header extends Component {
|
||||||
@ -76,33 +67,31 @@ class Header extends Component {
|
|||||||
<NavItem className="d-md-down-none">
|
<NavItem className="d-md-down-none">
|
||||||
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
|
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
|
||||||
</NavItem>
|
</NavItem>
|
||||||
<NavItem>
|
<NavDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
|
||||||
<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
|
<DropdownToggle nav caret>
|
||||||
<DropdownToggle className="nav-link dropdown-toggle">
|
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
|
||||||
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
|
<span className="d-md-down-none">admin</span>
|
||||||
<span className="d-md-down-none">admin</span>
|
</DropdownToggle>
|
||||||
</DropdownToggle>
|
<DropdownMenu right>
|
||||||
<DropdownMenu right className={this.state.dropdownOpen ? 'show' : ''}>
|
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
|
||||||
<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-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-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-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
|
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">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 header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
|
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
|
||||||
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
|
<DropdownItem><i className="fa fa-wrench"></i> Settings</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-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
|
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
|
||||||
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
|
<DropdownItem divider/>
|
||||||
<DropdownItem divider/>
|
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
|
||||||
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
|
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
|
||||||
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
|
</DropdownMenu>
|
||||||
</DropdownMenu>
|
</NavDropdown>
|
||||||
</Dropdown>
|
|
||||||
</NavItem>
|
|
||||||
</Nav>
|
</Nav>
|
||||||
<NavbarToggler className="d-md-down-none" type="button" onClick={this.asideToggle}>☰</NavbarToggler>
|
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>☰</NavbarToggler>
|
||||||
</header>
|
</header>
|
||||||
)
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Header",
|
"name": "Header",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Header.js"
|
"main": "./Header.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -61,7 +61,7 @@ class Sidebar extends Component {
|
|||||||
return (
|
return (
|
||||||
<NavItem key={key} className={classes}>
|
<NavItem key={key} className={classes}>
|
||||||
{ isExternal(item.url) ?
|
{ isExternal(item.url) ?
|
||||||
<RsNavLink href={item.url} className={variant} activeClassName="active">
|
<RsNavLink href={item.url} className={variant} active>
|
||||||
<i className={item.icon}></i>{item.name}{badge(item.badge)}
|
<i className={item.icon}></i>{item.name}{badge(item.badge)}
|
||||||
</RsNavLink>
|
</RsNavLink>
|
||||||
:
|
:
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Sidebar",
|
"name": "Sidebar",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Sidebar.js"
|
"main": "./Sidebar.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarFooter",
|
"name": "SidebarFooter",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarFooter.js"
|
"main": "./SidebarFooter.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarForm",
|
"name": "SidebarForm",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarForm.js"
|
"main": "./SidebarForm.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarHeader",
|
"name": "SidebarHeader",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarHeader.js"
|
"main": "./SidebarHeader.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarMinimizer",
|
"name": "SidebarMinimizer",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarMinimizer.js"
|
"main": "./SidebarMinimizer.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Full",
|
"name": "Full",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Full.js"
|
"main": "./Full.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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, CardBlock} from "reactstrap";
|
import {CardColumns, Card, CardHeader, CardBody} from 'reactstrap';
|
||||||
|
|
||||||
const line = {
|
const line = {
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
@ -153,7 +153,7 @@ class Charts extends Component {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="chart-wrapper">
|
<div className="chart-wrapper">
|
||||||
<Line data={line}
|
<Line data={line}
|
||||||
options={{
|
options={{
|
||||||
@ -161,7 +161,7 @@ class Charts extends Component {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@ -172,7 +172,7 @@ class Charts extends Component {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="chart-wrapper">
|
<div className="chart-wrapper">
|
||||||
<Bar data={bar}
|
<Bar data={bar}
|
||||||
options={{
|
options={{
|
||||||
@ -180,7 +180,7 @@ class Charts extends Component {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@ -191,11 +191,11 @@ class Charts extends Component {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="chart-wrapper">
|
<div className="chart-wrapper">
|
||||||
<Doughnut data={doughnut}/>
|
<Doughnut data={doughnut}/>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@ -206,11 +206,11 @@ class Charts extends Component {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="chart-wrapper">
|
<div className="chart-wrapper">
|
||||||
<Radar data={radar}/>
|
<Radar data={radar}/>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@ -221,11 +221,11 @@ class Charts extends Component {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="chart-wrapper">
|
<div className="chart-wrapper">
|
||||||
<Pie data={pie}/>
|
<Pie data={pie}/>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
@ -236,11 +236,11 @@ class Charts extends Component {
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="chart-wrapper">
|
<div className="chart-wrapper">
|
||||||
<Polar data={polar}/>
|
<Polar data={polar}/>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</CardColumns>
|
</CardColumns>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Charts",
|
"name": "Charts",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Charts.js"
|
"main": "./Charts.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Row, Col, Card, CardHeader, CardBlock, Button} from "reactstrap";
|
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
|
||||||
|
|
||||||
class Buttons extends Component {
|
class Buttons extends Component {
|
||||||
render() {
|
render() {
|
||||||
@ -11,34 +11,34 @@ class Buttons extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Options</strong>
|
<strong>Options</strong>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button color="primary">Primary</Button>{' '}
|
<Button color="primary">Primary</Button>{' '}
|
||||||
<Button color="secondary">Secondary</Button>{' '}
|
<Button color="secondary">Secondary</Button>{' '}
|
||||||
<Button color="success">Success</Button>{' '}
|
<Button color="success">Success</Button>{' '}
|
||||||
<Button color="warning">Warning</Button>{' '}
|
<Button color="warning">Warning</Button>{' '}
|
||||||
<Button color="danger">Danger</Button>{' '}
|
<Button color="danger">Danger</Button>{' '}
|
||||||
<Button color="link">Link</Button>{' '}
|
<Button color="link">Link</Button>{' '}
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>With Icons</strong>
|
<strong>With Icons</strong>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button color="primary"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button>
|
<Button color="primary"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button>
|
||||||
<Button color="secondary"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
|
<Button color="secondary"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
|
||||||
<Button color="success"><i className="fa fa-magic"></i> Success</Button>
|
<Button color="success"><i className="fa fa-magic"></i> Success</Button>
|
||||||
<Button color="warning"><i className="fa fa-map-marker"></i> Warning</Button>
|
<Button color="warning"><i className="fa fa-map-marker"></i> Warning</Button>
|
||||||
<Button color="danger"><i className="fa fa-rss"></i> Danger</Button>
|
<Button color="danger"><i className="fa fa-rss"></i> Danger</Button>
|
||||||
<Button color="link"><i className="fa fa-link"></i> Link</Button>
|
<Button color="link"><i className="fa fa-link"></i> Link</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Large</strong>
|
<strong>Size Large</strong>
|
||||||
<small>Add this class <code>.btn-lg</code></small>
|
<small>Add this class <code>.btn-lg</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button color="primary" size="lg">Primary</Button>
|
<Button color="primary" size="lg">Primary</Button>
|
||||||
<Button color="secondary" size="lg">Secondary</Button>
|
<Button color="secondary" size="lg">Secondary</Button>
|
||||||
<Button color="success" size="lg">Success</Button>
|
<Button color="success" size="lg">Success</Button>
|
||||||
@ -46,14 +46,14 @@ class Buttons extends Component {
|
|||||||
<Button color="warning" size="lg">Warning</Button>
|
<Button color="warning" size="lg">Warning</Button>
|
||||||
<Button color="danger" size="lg">Danger</Button>
|
<Button color="danger" size="lg">Danger</Button>
|
||||||
<Button color="link" size="lg">Link</Button>
|
<Button color="link" size="lg">Link</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Small</strong>
|
<strong>Size Small</strong>
|
||||||
<small>Add this class <code>.btn-sm</code></small>
|
<small>Add this class <code>.btn-sm</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button color="primary" size="sm">Primary</Button>
|
<Button color="primary" size="sm">Primary</Button>
|
||||||
<Button color="secondary" size="sm">Secondary</Button>
|
<Button color="secondary" size="sm">Secondary</Button>
|
||||||
<Button color="success" size="sm">Success</Button>
|
<Button color="success" size="sm">Success</Button>
|
||||||
@ -61,14 +61,14 @@ class Buttons extends Component {
|
|||||||
<Button color="warning" size="sm">Warning</Button>
|
<Button color="warning" size="sm">Warning</Button>
|
||||||
<Button color="danger" size="sm">Danger</Button>
|
<Button color="danger" size="sm">Danger</Button>
|
||||||
<Button color="link" size="sm">Link</Button>
|
<Button color="link" size="sm">Link</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Disabled state</strong>
|
<strong>Disabled state</strong>
|
||||||
<small>Add this <code>disabled="disabled"</code></small>
|
<small>Add this <code>disabled="disabled"</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button color="primary" disabled>Primary</Button>
|
<Button color="primary" disabled>Primary</Button>
|
||||||
<Button color="secondary" disabled>Secondary</Button>
|
<Button color="secondary" disabled>Secondary</Button>
|
||||||
<Button color="success" disabled>Success</Button>
|
<Button color="success" disabled>Success</Button>
|
||||||
@ -76,14 +76,14 @@ class Buttons extends Component {
|
|||||||
<Button color="warning" disabled>Warning</Button>
|
<Button color="warning" disabled>Warning</Button>
|
||||||
<Button color="danger" disabled>Danger</Button>
|
<Button color="danger" disabled>Danger</Button>
|
||||||
<Button color="link" disabled>Link</Button>
|
<Button color="link" disabled>Link</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Active state</strong>
|
<strong>Active state</strong>
|
||||||
<small>Add this class <code>.active</code></small>
|
<small>Add this class <code>.active</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button color="primary" active>Primary</Button>
|
<Button color="primary" active>Primary</Button>
|
||||||
<Button color="secondary" active>Secondary</Button>
|
<Button color="secondary" active>Secondary</Button>
|
||||||
<Button color="success" active>Success</Button>
|
<Button color="success" active>Success</Button>
|
||||||
@ -91,14 +91,14 @@ class Buttons extends Component {
|
|||||||
<Button color="warning" active>Warning</Button>
|
<Button color="warning" active>Warning</Button>
|
||||||
<Button color="danger" active>Danger</Button>
|
<Button color="danger" active>Danger</Button>
|
||||||
<Button color="link" active>Link</Button>
|
<Button color="link" active>Link</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Block Level Buttons</strong>
|
<strong>Block Level Buttons</strong>
|
||||||
<small>Add this class <code>.btn-block</code></small>
|
<small>Add this class <code>.btn-block</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button color="secondary" size="lg" block>Block level button</Button>
|
<Button color="secondary" size="lg" block>Block level button</Button>
|
||||||
<Button color="primary" size="lg" block>Block level button</Button>
|
<Button color="primary" size="lg" block>Block level button</Button>
|
||||||
<Button color="success" size="lg" block>Block level button</Button>
|
<Button color="success" size="lg" block>Block level button</Button>
|
||||||
@ -106,7 +106,7 @@ class Buttons extends Component {
|
|||||||
<Button color="warning" size="lg" block>Block level button</Button>
|
<Button color="warning" size="lg" block>Block level button</Button>
|
||||||
<Button color="danger" size="lg" block>Block level button</Button>
|
<Button color="danger" size="lg" block>Block level button</Button>
|
||||||
<Button color="link" size="lg" block>Block level button</Button>
|
<Button color="link" size="lg" block>Block level button</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" md="6">
|
<Col xs="12" md="6">
|
||||||
@ -114,95 +114,95 @@ class Buttons extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Options</strong>
|
<strong>Options</strong>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button outline color="primary">Primary</Button>
|
<Button outline color="primary">Primary</Button>
|
||||||
<Button outline color="secondary">Secondary</Button>
|
<Button outline color="secondary">Secondary</Button>
|
||||||
<Button outline color="success">Success</Button>
|
<Button outline color="success">Success</Button>
|
||||||
<Button outline color="warning">Warning</Button>
|
<Button outline color="warning">Warning</Button>
|
||||||
<Button outline color="danger">Danger</Button>
|
<Button outline color="danger">Danger</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>With Icons</strong>
|
<strong>With Icons</strong>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button outline color="primary"><i className="fa fa-star"></i> Primary</Button>
|
<Button outline color="primary"><i className="fa fa-star"></i> Primary</Button>
|
||||||
<Button outline color="secondary"><i className="fa fa-lightbulb-o"></i> Secondary</Button>
|
<Button outline color="secondary"><i className="fa fa-lightbulb-o"></i> Secondary</Button>
|
||||||
<Button outline color="success"><i className="fa fa-magic"></i> Success</Button>
|
<Button outline color="success"><i className="fa fa-magic"></i> Success</Button>
|
||||||
<Button outline color="warning"><i className="fa fa-map-marker"></i> Warning</Button>
|
<Button outline color="warning"><i className="fa fa-map-marker"></i> Warning</Button>
|
||||||
<Button outline color="danger"><i className="fa fa-rss"></i> Danger</Button>
|
<Button outline color="danger"><i className="fa fa-rss"></i> Danger</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Large</strong>
|
<strong>Size Large</strong>
|
||||||
<small>Add this class <code>.btn-lg</code></small>
|
<small>Add this class <code>.btn-lg</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button outline color="primary" size="lg">Primary</Button>
|
<Button outline color="primary" size="lg">Primary</Button>
|
||||||
<Button outline color="secondary" size="lg">Secondary</Button>
|
<Button outline color="secondary" size="lg">Secondary</Button>
|
||||||
<Button outline color="success" size="lg">Success</Button>
|
<Button outline color="success" size="lg">Success</Button>
|
||||||
<Button outline color="info" size="lg">Info</Button>
|
<Button outline color="info" size="lg">Info</Button>
|
||||||
<Button outline color="warning" size="lg">Warning</Button>
|
<Button outline color="warning" size="lg">Warning</Button>
|
||||||
<Button outline color="danger" size="lg">Danger</Button>
|
<Button outline color="danger" size="lg">Danger</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Size Small</strong>
|
<strong>Size Small</strong>
|
||||||
<small>Add this class <code>.btn-sm</code></small>
|
<small>Add this class <code>.btn-sm</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button outline color="primary" size="sm">Primary</Button>
|
<Button outline color="primary" size="sm">Primary</Button>
|
||||||
<Button outline color="secondary" size="sm">Secondary</Button>
|
<Button outline color="secondary" size="sm">Secondary</Button>
|
||||||
<Button outline color="success" size="sm">Success</Button>
|
<Button outline color="success" size="sm">Success</Button>
|
||||||
<Button outline color="info" size="sm">Info</Button>
|
<Button outline color="info" size="sm">Info</Button>
|
||||||
<Button outline color="warning" size="sm">Warning</Button>
|
<Button outline color="warning" size="sm">Warning</Button>
|
||||||
<Button outline color="danger" size="sm">Danger</Button>
|
<Button outline color="danger" size="sm">Danger</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Disabled state</strong>
|
<strong>Disabled state</strong>
|
||||||
<small>Add this <code>disabled="disabled"</code></small>
|
<small>Add this <code>disabled="disabled"</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button outline color="primary" disabled>Primary</Button>
|
<Button outline color="primary" disabled>Primary</Button>
|
||||||
<Button outline color="secondary" disabled>Secondary</Button>
|
<Button outline color="secondary" disabled>Secondary</Button>
|
||||||
<Button color="success" disabled>Success</Button>
|
<Button color="success" disabled>Success</Button>
|
||||||
<Button outline color="info" disabled>Info</Button>
|
<Button outline color="info" disabled>Info</Button>
|
||||||
<Button outline color="warning" disabled>Warning</Button>
|
<Button outline color="warning" disabled>Warning</Button>
|
||||||
<Button outline color="danger" disabled>Danger</Button>
|
<Button outline color="danger" disabled>Danger</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Active state</strong>
|
<strong>Active state</strong>
|
||||||
<small>Add this class <code>.active</code></small>
|
<small>Add this class <code>.active</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button outline color="primary" active>Primary</Button>
|
<Button outline color="primary" active>Primary</Button>
|
||||||
<Button outline color="secondary" active>Secondary</Button>
|
<Button outline color="secondary" active>Secondary</Button>
|
||||||
<Button outline color="success" active>Success</Button>
|
<Button outline color="success" active>Success</Button>
|
||||||
<Button outline color="info" active>Info</Button>
|
<Button outline color="info" active>Info</Button>
|
||||||
<Button outline color="warning" active>Warning</Button>
|
<Button outline color="warning" active>Warning</Button>
|
||||||
<Button outline color="danger" active>Danger</Button>
|
<Button outline color="danger" active>Danger</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Block Level Buttons</strong>
|
<strong>Block Level Buttons</strong>
|
||||||
<small>Add this class <code>.btn-block</code></small>
|
<small>Add this class <code>.btn-block</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button outline color="secondary" size="lg" block>Block level button</Button>
|
<Button outline color="secondary" size="lg" block>Block level button</Button>
|
||||||
<Button outline color="primary" size="lg" block>Block level button</Button>
|
<Button outline color="primary" size="lg" block>Block level button</Button>
|
||||||
<Button outline color="success" size="lg" block>Block level button</Button>
|
<Button outline color="success" size="lg" block>Block level button</Button>
|
||||||
<Button outline color="info" size="lg" block>Block level button</Button>
|
<Button outline color="info" size="lg" block>Block level button</Button>
|
||||||
<Button outline color="warning" size="lg" block>Block level button</Button>
|
<Button outline color="warning" size="lg" block>Block level button</Button>
|
||||||
<Button outline color="danger" size="lg" block>Block level button</Button>
|
<Button outline color="danger" size="lg" block>Block level button</Button>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Buttons",
|
"name": "Buttons",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Buttons.js"
|
"main": "./Buttons.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBlock, Label, Input} from "reactstrap";
|
import {Badge, Row, Col, Card, CardHeader, CardFooter, CardBody, Label, Input} from 'reactstrap';
|
||||||
|
|
||||||
class Cards extends Component {
|
class Cards extends Component {
|
||||||
render() {
|
render() {
|
||||||
@ -11,20 +11,20 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card title
|
Card title
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
<Card>
|
<Card>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>Card footer</CardFooter>
|
<CardFooter>Card footer</CardFooter>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
@ -33,11 +33,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-check float-right"></i>Card with icon
|
<i className="fa fa-check float-right"></i>Card with icon
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -50,11 +50,11 @@ class Cards extends Component {
|
|||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -63,11 +63,11 @@ class Cards extends Component {
|
|||||||
Card with label
|
Card with label
|
||||||
<Badge color="success" className="float-right">Success</Badge>
|
<Badge color="success" className="float-right">Success</Badge>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -76,11 +76,11 @@ class Cards extends Component {
|
|||||||
Card with label
|
Card with label
|
||||||
<Badge pill color="danger" className="float-right">42</Badge>
|
<Badge pill color="danger" className="float-right">42</Badge>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -90,11 +90,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card outline primary
|
Card outline primary
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -102,11 +102,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card outline secondary
|
Card outline secondary
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -114,11 +114,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card outline success
|
Card outline success
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -126,11 +126,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card outline info
|
Card outline info
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -138,11 +138,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card outline warning
|
Card outline warning
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -150,11 +150,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card outline danger
|
Card outline danger
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -165,11 +165,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card with accent
|
Card with accent
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -177,11 +177,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card with accent
|
Card with accent
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -189,11 +189,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card with accent
|
Card with accent
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -201,11 +201,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card with accent
|
Card with accent
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -213,11 +213,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card with accent
|
Card with accent
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -225,73 +225,73 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card with accent
|
Card with accent
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
<Card className="text-white bg-primary text-center">
|
<Card className="text-white bg-primary text-center">
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
<Card className="text-white bg-success text-center">
|
<Card className="text-white bg-success text-center">
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
<Card className="text-white bg-info text-center">
|
<Card className="text-white bg-info text-center">
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
<Card className="text-white bg-warning text-center">
|
<Card className="text-white bg-warning text-center">
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
<Card className="text-white bg-danger text-center">
|
<Card className="text-white bg-danger text-center">
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
<Card className="text-white bg-primary text-center">
|
<Card className="text-white bg-primary text-center">
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -301,11 +301,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card title
|
Card title
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -313,11 +313,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card title
|
Card title
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -325,11 +325,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card title
|
Card title
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -337,11 +337,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card title
|
Card title
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" md="4">
|
<Col xs="12" sm="6" md="4">
|
||||||
@ -349,11 +349,11 @@ class Cards extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Card title
|
Card title
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut
|
||||||
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
|
||||||
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Cards",
|
"name": "Cards",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Cards.js"
|
"main": "./Cards.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {
|
import {
|
||||||
Row,
|
Row,
|
||||||
Col,
|
Col,
|
||||||
@ -10,7 +10,7 @@ import {
|
|||||||
Card,
|
Card,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
CardFooter,
|
CardFooter,
|
||||||
CardBlock,
|
CardBody,
|
||||||
Form,
|
Form,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
FormText,
|
FormText,
|
||||||
@ -19,7 +19,7 @@ import {
|
|||||||
InputGroup,
|
InputGroup,
|
||||||
InputGroupAddon,
|
InputGroupAddon,
|
||||||
InputGroupButton
|
InputGroupButton
|
||||||
} from "reactstrap";
|
} from 'reactstrap';
|
||||||
|
|
||||||
class Forms extends Component {
|
class Forms extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@ -38,7 +38,7 @@ class Forms extends Component {
|
|||||||
<strong>Credit Card</strong>
|
<strong>Credit Card</strong>
|
||||||
<small> Form</small>
|
<small> Form</small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="12">
|
<Col xs="12">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
@ -99,7 +99,7 @@ class Forms extends Component {
|
|||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6">
|
<Col xs="12" sm="6">
|
||||||
@ -108,7 +108,7 @@ class Forms extends Component {
|
|||||||
<strong>Company</strong>
|
<strong>Company</strong>
|
||||||
<small> Form</small>
|
<small> Form</small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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"/>
|
||||||
@ -139,7 +139,7 @@ class Forms extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -149,7 +149,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Basic Form</strong> Elements
|
<strong>Basic Form</strong> Elements
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
|
<Form action="" method="post" encType="multipart/form-data" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col md="3">
|
<Col md="3">
|
||||||
@ -371,8 +371,19 @@ class Forms extends Component {
|
|||||||
<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>
|
||||||
|
<Col md="3">
|
||||||
|
<Label className="custom-file" htmlFor="file-input">Custom file input</Label>
|
||||||
|
</Col>
|
||||||
|
<Col xs="12" md="9">
|
||||||
|
<Label className="custom-file">
|
||||||
|
<Input className="custom-file" type="file" id="file-input" name="file-input"/>
|
||||||
|
<span className="custom-file-control"></span>
|
||||||
|
</Label>
|
||||||
|
</Col>
|
||||||
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -382,7 +393,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Inline</strong> Form
|
<strong>Inline</strong> Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" inline>
|
<Form action="" method="post" inline>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
|
<Label htmlFor="exampleInputName2" className="pr-1">Name</Label>
|
||||||
@ -393,7 +404,7 @@ class Forms extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -405,7 +416,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Horizontal</strong> Form
|
<strong>Horizontal</strong> Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" className="form-horizontal">
|
<Form action="" method="post" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col md="3">
|
<Col md="3">
|
||||||
@ -426,7 +437,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -436,7 +447,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Normal</strong> Form
|
<strong>Normal</strong> Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post">
|
<Form action="" method="post">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="nf-email">Email</Label>
|
<Label htmlFor="nf-email">Email</Label>
|
||||||
@ -449,7 +460,7 @@ class Forms extends Component {
|
|||||||
<span className="help-block">Please enter your password</span>
|
<span className="help-block">Please enter your password</span>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -459,7 +470,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Input <strong>Grid</strong>
|
Input <strong>Grid</strong>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" className="form-horizontal">
|
<Form action="" method="post" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col sm="3">
|
<Col sm="3">
|
||||||
@ -512,7 +523,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
|
<Button type="submit" size="sm" color="primary"><i className="fa fa-user"></i> Login</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -522,7 +533,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Input <strong>Sizes</strong>
|
Input <strong>Sizes</strong>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" className="form-horizontal">
|
<Form action="" method="post" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col sm="5">
|
<Col sm="5">
|
||||||
@ -551,7 +562,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="primary"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -563,39 +574,37 @@ class Forms extends Component {
|
|||||||
<Col xs="12" sm="6">
|
<Col xs="12" sm="6">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Validation states</strong> Form
|
<strong>Validation feedback</strong> Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<FormGroup color="success">
|
<FormGroup>
|
||||||
<Label htmlFor="inputIsValid">Input is valid</Label>
|
<Label htmlFor="inputIsValid">Input is valid</Label>
|
||||||
<Input state="success" type="text" className="is-valid" id="inputIsValid"/>
|
<Input type="text" className="is-valid" id="inputIsValid"/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
<FormGroup className="has-warning">
|
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6">
|
<Col xs="12" sm="6">
|
||||||
<Card>
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Validation states</strong> with optional icons <em>(deprecated)</em>
|
<strong>Validation feedback</strong> Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<FormGroup className="has-success">
|
<Form className="was-validated">
|
||||||
<Label htmlFor="inputSuccess2i">Input with success</Label>
|
<FormGroup>
|
||||||
<Input type="text" className="form-control-success" id="inputSuccess2i"/>
|
<Label htmlFor="inputSuccess2i">Non-required input</Label>
|
||||||
</FormGroup>
|
<Input type="text" className="form-control-success" id="inputSuccess2i"/>
|
||||||
<FormGroup className="has-warning">
|
</FormGroup>
|
||||||
<Label htmlFor="inputWarning2i">Input with warning</Label>
|
<FormGroup>
|
||||||
<Input type="text" className="form-control-warning" id="inputWarning2i"/>
|
<Label htmlFor="inputWarning2i">Required input</Label>
|
||||||
</FormGroup>
|
<Input type="text" className="form-control-warning" id="inputWarning2i" required/>
|
||||||
<FormGroup className="has-danger has-feedback">
|
</FormGroup>
|
||||||
<Label htmlFor="inputError2i">Input with error</Label>
|
</Form>
|
||||||
<Input type="text" className="form-control-danger" id="inputError2i"/>
|
</CardBody>
|
||||||
</FormGroup>
|
|
||||||
</CardBlock>
|
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -605,7 +614,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Icon/Text</strong> Groups
|
<strong>Icon/Text</strong> Groups
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" className="form-horizontal">
|
<Form action="" method="post" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col md="12">
|
<Col md="12">
|
||||||
@ -633,7 +642,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -645,7 +654,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Buttons</strong> Groups
|
<strong>Buttons</strong> Groups
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" className="form-horizontal">
|
<Form action="" method="post" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col md="12">
|
<Col md="12">
|
||||||
@ -681,7 +690,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -693,7 +702,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<strong>Dropdowns</strong> Groups
|
<strong>Dropdowns</strong> Groups
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form className="form-horizontal">
|
<Form className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col md="12">
|
<Col md="12">
|
||||||
@ -776,7 +785,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
<Button type="submit" size="sm" color="success"><i className="fa fa-dot-circle-o"></i> Submit</Button>
|
||||||
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
<Button type="reset" size="sm" color="danger"><i className="fa fa-ban"></i> Reset</Button>
|
||||||
@ -791,7 +800,7 @@ class Forms extends Component {
|
|||||||
Use the grid for big devices!
|
Use the grid for big devices!
|
||||||
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
<small><code>.col-lg-*</code> <code>.col-md-*</code> <code>.col-sm-*</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" className="form-horizontal">
|
<Form action="" method="post" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col md="8">
|
<Col md="8">
|
||||||
@ -834,7 +843,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary">Action</Button>
|
<Button type="submit" size="sm" color="primary">Action</Button>
|
||||||
<Button size="sm" color="danger">Action</Button>
|
<Button size="sm" color="danger">Action</Button>
|
||||||
@ -850,7 +859,7 @@ class Forms extends Component {
|
|||||||
Input Grid for small devices!
|
Input Grid for small devices!
|
||||||
<small><code>.col-*</code></small>
|
<small><code>.col-*</code></small>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post" className="form-horizontal">
|
<Form action="" method="post" className="form-horizontal">
|
||||||
<FormGroup row>
|
<FormGroup row>
|
||||||
<Col xs="4">
|
<Col xs="4">
|
||||||
@ -893,7 +902,7 @@ class Forms extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<Button type="submit" size="sm" color="primary">Action</Button>
|
<Button type="submit" size="sm" color="primary">Action</Button>
|
||||||
<Button size="sm" color="danger">Action</Button>
|
<Button size="sm" color="danger">Action</Button>
|
||||||
@ -910,7 +919,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Example Form
|
Example Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post">
|
<Form action="" method="post">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
@ -937,7 +946,7 @@ class Forms extends Component {
|
|||||||
<Button type="submit" size="sm" color="primary">Submit</Button>
|
<Button type="submit" size="sm" color="primary">Submit</Button>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="4">
|
<Col xs="12" sm="4">
|
||||||
@ -945,7 +954,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Example Form
|
Example Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post">
|
<Form action="" method="post">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
@ -969,7 +978,7 @@ class Forms extends Component {
|
|||||||
<Button type="submit" size="sm" color="secondary">Submit</Button>
|
<Button type="submit" size="sm" color="secondary">Submit</Button>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="4">
|
<Col xs="12" sm="4">
|
||||||
@ -977,7 +986,7 @@ class Forms extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Example Form
|
Example Form
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form action="" method="post">
|
<Form action="" method="post">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<InputGroup>
|
<InputGroup>
|
||||||
@ -1001,7 +1010,7 @@ class Forms extends Component {
|
|||||||
<Button type="submit" size="sm" color="success">Submit</Button>
|
<Button type="submit" size="sm" color="success">Submit</Button>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -1016,7 +1025,7 @@ class Forms extends Component {
|
|||||||
<a href="#" className="btn-close"><i className="icon-close"></i></a>
|
<a href="#" className="btn-close"><i className="icon-close"></i></a>
|
||||||
</div>
|
</div>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Form className="form-horizontal">
|
<Form className="form-horizontal">
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label htmlFor="prependedInput">Prepended text</Label>
|
<Label htmlFor="prependedInput">Prepended text</Label>
|
||||||
@ -1072,7 +1081,7 @@ class Forms extends Component {
|
|||||||
<Button color="secondary">Cancel</Button>
|
<Button color="secondary">Cancel</Button>
|
||||||
</div>
|
</div>
|
||||||
</Form>
|
</Form>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Forms",
|
"name": "Forms",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Forms.js"
|
"main": "./Forms.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBlock} from "reactstrap";
|
import {Row, Col, Button, Modal, ModalHeader, ModalBody, ModalFooter, Card, CardHeader, CardBody} from 'reactstrap';
|
||||||
|
|
||||||
|
|
||||||
class Modals extends Component {
|
class Modals extends Component {
|
||||||
@ -84,7 +84,7 @@ class Modals extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i> Bootstrap Modals
|
<i className="fa fa-align-justify"></i> Bootstrap Modals
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Button onClick={this.toggle}>Launch demo modal</Button>
|
<Button onClick={this.toggle}>Launch demo modal</Button>
|
||||||
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
|
<Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
|
||||||
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
|
<ModalHeader toggle={this.toggle}>Modal title</ModalHeader>
|
||||||
@ -222,7 +222,7 @@ class Modals extends Component {
|
|||||||
</ModalFooter>
|
</ModalFooter>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Modals",
|
"name": "Modals",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Modals.js"
|
"main": "./Modals.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Row, Col, Card, CardHeader, CardBlock, Button} from "reactstrap";
|
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
|
||||||
|
|
||||||
class SocialButtons extends Component {
|
class SocialButtons extends Component {
|
||||||
render() {
|
render() {
|
||||||
@ -14,7 +14,7 @@ class SocialButtons extends Component {
|
|||||||
<code style={{textTransform: 'lowercase'}}><button className="btn-facebook"><span>
|
<code style={{textTransform: 'lowercase'}}><button className="btn-facebook"><span>
|
||||||
Facebook</span></Button></code>
|
Facebook</span></Button></code>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<h6>Size Small
|
<h6>Size Small
|
||||||
<small>Add this class <code>.btn-sm</code></small>
|
<small>Add this class <code>.btn-sm</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
@ -103,7 +103,7 @@ class SocialButtons extends Component {
|
|||||||
<Button size="lg" className="btn-foursquare"><span>Forsquare</span></Button>
|
<Button size="lg" className="btn-foursquare"><span>Forsquare</span></Button>
|
||||||
<Button size="lg" className="btn-vimeo"><span>Vimeo</span></Button>
|
<Button size="lg" className="btn-vimeo"><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -115,7 +115,7 @@ class SocialButtons extends Component {
|
|||||||
<code style={{textTransform: 'lowercase'}}><button className="btn-facebook icon"><span>
|
<code style={{textTransform: 'lowercase'}}><button className="btn-facebook icon"><span>
|
||||||
Facebook</span></Button></code>
|
Facebook</span></Button></code>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<h6>Size Small
|
<h6>Size Small
|
||||||
<small>Add this class <code>.btn-sm</code></small>
|
<small>Add this class <code>.btn-sm</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
@ -204,7 +204,7 @@ class SocialButtons extends Component {
|
|||||||
<Button size="lg" className="btn-foursquare icon"><span>Forsquare</span></Button>
|
<Button size="lg" className="btn-foursquare icon"><span>Forsquare</span></Button>
|
||||||
<Button size="lg" className="btn-vimeo icon"><span>Vimeo</span></Button>
|
<Button size="lg" className="btn-vimeo icon"><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -216,7 +216,7 @@ class SocialButtons extends Component {
|
|||||||
<code style={{textTransform: 'lowercase'}}><button className="btn-facebook text"><span>
|
<code style={{textTransform: 'lowercase'}}><button className="btn-facebook text"><span>
|
||||||
Facebook</span></Button></code>
|
Facebook</span></Button></code>
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<h6>Size Small
|
<h6>Size Small
|
||||||
<small>Add this class <code>.btn-sm</code></small>
|
<small>Add this class <code>.btn-sm</code></small>
|
||||||
</h6>
|
</h6>
|
||||||
@ -305,7 +305,7 @@ class SocialButtons extends Component {
|
|||||||
<Button size="lg" className="btn-foursquare text"><span>Forsquare</span></Button>
|
<Button size="lg" className="btn-foursquare text"><span>Forsquare</span></Button>
|
||||||
<Button size="lg" className="btn-vimeo text"><span>Vimeo</span></Button>
|
<Button size="lg" className="btn-vimeo text"><span>Vimeo</span></Button>
|
||||||
</p>
|
</p>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SocialButtons",
|
"name": "SocialButtons",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SocialButtons.js"
|
"main": "./SocialButtons.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Row, Col, Card, CardHeader, CardBlock, Label, Input, Table} from "reactstrap";
|
import {Row, Col, Card, CardHeader, CardBody, Label, Input, Table} from 'reactstrap';
|
||||||
|
|
||||||
class Switches extends Component {
|
class Switches extends Component {
|
||||||
render() {
|
render() {
|
||||||
@ -12,7 +12,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
3d Switch
|
3d Switch
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -48,7 +48,7 @@ class Switches extends Component {
|
|||||||
<span className="switch-label"></span>
|
<span className="switch-label"></span>
|
||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -57,7 +57,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch default
|
Switch default
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -93,7 +93,7 @@ class Switches extends Component {
|
|||||||
<span className="switch-label"></span>
|
<span className="switch-label"></span>
|
||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -102,7 +102,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch default - pills
|
Switch default - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -138,7 +138,7 @@ class Switches extends Component {
|
|||||||
<span className="switch-label"></span>
|
<span className="switch-label"></span>
|
||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -147,7 +147,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch outline
|
Switch outline
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -183,7 +183,7 @@ class Switches extends Component {
|
|||||||
<span className="switch-label"></span>
|
<span className="switch-label"></span>
|
||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -192,7 +192,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch outline - pills
|
Switch outline - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -228,7 +228,7 @@ class Switches extends Component {
|
|||||||
<span className="switch-label"></span>
|
<span className="switch-label"></span>
|
||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -237,7 +237,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch outline alternative
|
Switch outline alternative
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -273,7 +273,7 @@ class Switches extends Component {
|
|||||||
<span className="switch-label"></span>
|
<span className="switch-label"></span>
|
||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -282,7 +282,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch outline alternative - pills
|
Switch outline alternative - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -318,7 +318,7 @@ class Switches extends Component {
|
|||||||
<span className="switch-label"></span>
|
<span className="switch-label"></span>
|
||||||
<span className="switch-handle"></span>
|
<span className="switch-handle"></span>
|
||||||
</Label>
|
</Label>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -327,7 +327,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with text
|
Switch with text
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -363,7 +363,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -372,7 +372,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with text - pills
|
Switch with text - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -408,7 +408,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -417,7 +417,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with text outline
|
Switch with text outline
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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/>
|
||||||
@ -454,7 +454,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -463,7 +463,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with text outline - pills
|
Switch with text outline - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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/>
|
||||||
@ -500,7 +500,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -509,7 +509,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with text outline alternative
|
Switch with text outline alternative
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -545,7 +545,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -554,7 +554,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with text outline alternative - pills
|
Switch with text outline alternative - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -590,7 +590,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -599,7 +599,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with icon
|
Switch with icon
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -635,7 +635,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -644,7 +644,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with icon - pills
|
Switch with icon - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -680,7 +680,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -689,7 +689,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with icon outline
|
Switch with icon outline
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -725,7 +725,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -734,7 +734,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with icon outline - pills
|
Switch with icon outline - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -770,7 +770,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -779,7 +779,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with icon outline alternative
|
Switch with icon outline alternative
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -815,7 +815,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -824,7 +824,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Switch with icon outline alternative - pills
|
Switch with icon outline alternative - pills
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<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>
|
||||||
@ -860,7 +860,7 @@ class Switches extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -869,7 +869,7 @@ class Switches extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Sizes
|
Sizes
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body p-0">
|
<CardBody className="p-0">
|
||||||
<Table hover striped className="table-align-middle mb-0">
|
<Table hover striped className="table-align-middle mb-0">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -941,7 +941,7 @@ class Switches extends Component {
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Switches",
|
"name": "Switches",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Switches.js"
|
"main": "./Switches.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,16 +1,16 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {
|
import {
|
||||||
Badge,
|
Badge,
|
||||||
Row,
|
Row,
|
||||||
Col,
|
Col,
|
||||||
Card,
|
Card,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
CardBlock,
|
CardBody,
|
||||||
Table,
|
Table,
|
||||||
Pagination,
|
Pagination,
|
||||||
PaginationItem,
|
PaginationItem,
|
||||||
PaginationLink
|
PaginationLink
|
||||||
} from "reactstrap";
|
} from 'reactstrap';
|
||||||
|
|
||||||
|
|
||||||
class Tables extends Component {
|
class Tables extends Component {
|
||||||
@ -23,7 +23,7 @@ class Tables extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i> Simple Table
|
<i className="fa fa-align-justify"></i> Simple Table
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Table responsive>
|
<Table responsive>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -96,7 +96,7 @@ class Tables extends Component {
|
|||||||
<PaginationLink next href="#"></PaginationLink>
|
<PaginationLink next href="#"></PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -105,7 +105,7 @@ class Tables extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i> Striped Table
|
<i className="fa fa-align-justify"></i> Striped Table
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Table responsive striped>
|
<Table responsive striped>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -168,7 +168,7 @@ class Tables extends Component {
|
|||||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -180,7 +180,7 @@ class Tables extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i> Condensed Table
|
<i className="fa fa-align-justify"></i> Condensed Table
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Table responsive size="sm">
|
<Table responsive size="sm">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -243,7 +243,7 @@ class Tables extends Component {
|
|||||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -252,7 +252,7 @@ class Tables extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i> Bordered Table
|
<i className="fa fa-align-justify"></i> Bordered Table
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Table responsive bordered>
|
<Table responsive bordered>
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -310,12 +310,12 @@ class Tables extends Component {
|
|||||||
<PaginationItem active>
|
<PaginationItem active>
|
||||||
<PaginationLink href="#">1</PaginationLink>
|
<PaginationLink href="#">1</PaginationLink>
|
||||||
</PaginationItem>
|
</PaginationItem>
|
||||||
<lPaginationItemi className="page-item"><PaginationLink href="#">2</PaginationLink></lPaginationItemi>
|
<PaginationItem className="page-item"><PaginationLink href="#">2</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink href="#">3</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink href="#">4</PaginationLink></PaginationItem>
|
||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
@ -327,7 +327,7 @@ class Tables extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-align-justify"></i> Combined All Table
|
<i className="fa fa-align-justify"></i> Combined All Table
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Table hover bordered striped responsive size="sm">
|
<Table hover bordered striped responsive size="sm">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
@ -392,7 +392,7 @@ class Tables extends Component {
|
|||||||
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
<PaginationItem><PaginationLink next href="#">Next</PaginationLink></PaginationItem>
|
||||||
</Pagination>
|
</Pagination>
|
||||||
</nav>
|
</nav>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Tables",
|
"name": "Tables",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Tables.js"
|
"main": "./Tables.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from "reactstrap";
|
import {Badge, Row, Col, TabContent, TabPane, Nav, NavItem, NavLink} from 'reactstrap';
|
||||||
import classnames from "classnames";
|
import classnames from 'classnames';
|
||||||
|
|
||||||
class Tabs extends Component {
|
class Tabs extends Component {
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Tabs",
|
"name": "Tabs",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Tabs.js"
|
"main": "./Tabs.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, { Component } from 'react';
|
||||||
import {Bar, Line} from "react-chartjs-2";
|
import {Bar, Line} from 'react-chartjs-2';
|
||||||
import {
|
import {
|
||||||
Badge,
|
Badge,
|
||||||
Row,
|
Row,
|
||||||
@ -11,7 +11,7 @@ import {
|
|||||||
DropdownItem,
|
DropdownItem,
|
||||||
Card,
|
Card,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
CardBlock,
|
CardBody,
|
||||||
CardFooter,
|
CardFooter,
|
||||||
CardTitle,
|
CardTitle,
|
||||||
Button,
|
Button,
|
||||||
@ -21,7 +21,7 @@ import {
|
|||||||
Label,
|
Label,
|
||||||
Input,
|
Input,
|
||||||
Table
|
Table
|
||||||
} from "reactstrap";
|
} from 'reactstrap';
|
||||||
|
|
||||||
const brandPrimary = '#20a8d8';
|
const brandPrimary = '#20a8d8';
|
||||||
const brandSuccess = '#4dbd74';
|
const brandSuccess = '#4dbd74';
|
||||||
@ -435,14 +435,14 @@ class Dashboard extends Component {
|
|||||||
<Row>
|
<Row>
|
||||||
<Col xs="12" sm="6" lg="3">
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Card className="text-white bg-primary">
|
<Card className="text-white bg-primary">
|
||||||
<CardBlock className="card-body pb-0">
|
<CardBody className="pb-0">
|
||||||
<ButtonGroup className="float-right">
|
<ButtonGroup className="float-right">
|
||||||
<ButtonDropdown id='card1' isOpen={this.state.card1}
|
<ButtonDropdown id='card1' isOpen={this.state.card1}
|
||||||
toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
|
toggle={() => { this.setState({ card1: !this.state.card1 }); }}>
|
||||||
<DropdownToggle caret className="p-0" color="transparent">
|
<DropdownToggle caret className="p-0" color="transparent">
|
||||||
<i className="icon-settings"></i>
|
<i className="icon-settings"></i>
|
||||||
</DropdownToggle>
|
</DropdownToggle>
|
||||||
<DropdownMenu className={this.state.card1 ? "show" : ""} right>
|
<DropdownMenu right>
|
||||||
<DropdownItem>Action</DropdownItem>
|
<DropdownItem>Action</DropdownItem>
|
||||||
<DropdownItem>Another action</DropdownItem>
|
<DropdownItem>Another action</DropdownItem>
|
||||||
<DropdownItem disabled>Disabled action</DropdownItem>
|
<DropdownItem disabled>Disabled action</DropdownItem>
|
||||||
@ -452,7 +452,7 @@ class Dashboard extends Component {
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
<h4 className="mb-0">9.823</h4>
|
<h4 className="mb-0">9.823</h4>
|
||||||
<p>Members online</p>
|
<p>Members online</p>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<div className="chart-wrapper px-3" style={{height:'70px'}}>
|
<div className="chart-wrapper px-3" style={{height:'70px'}}>
|
||||||
<Line data={cardChartData1} options={cardChartOpts1} height={70}/>
|
<Line data={cardChartData1} options={cardChartOpts1} height={70}/>
|
||||||
</div>
|
</div>
|
||||||
@ -461,14 +461,14 @@ class Dashboard extends Component {
|
|||||||
|
|
||||||
<Col xs="12" sm="6" lg="3">
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Card className="text-white bg-info">
|
<Card className="text-white bg-info">
|
||||||
<CardBlock className="card-body pb-0">
|
<CardBody className="pb-0">
|
||||||
<ButtonGroup className="float-right">
|
<ButtonGroup className="float-right">
|
||||||
<Dropdown id='card2' isOpen={this.state.card2}
|
<Dropdown id='card2' isOpen={this.state.card2}
|
||||||
toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
|
toggle={() => { this.setState({ card2: !this.state.card2 }); }}>
|
||||||
<DropdownToggle caret className="p-0" color="transparent">
|
<DropdownToggle className="p-0" color="transparent">
|
||||||
<i className="icon-settings"></i>
|
<i className="icon-location-pin"></i>
|
||||||
</DropdownToggle>
|
</DropdownToggle>
|
||||||
<DropdownMenu className={this.state.card2 ? "show" : ""} right>
|
<DropdownMenu right>
|
||||||
<DropdownItem>Action</DropdownItem>
|
<DropdownItem>Action</DropdownItem>
|
||||||
<DropdownItem>Another action</DropdownItem>
|
<DropdownItem>Another action</DropdownItem>
|
||||||
<DropdownItem>Something else here</DropdownItem>
|
<DropdownItem>Something else here</DropdownItem>
|
||||||
@ -477,7 +477,7 @@ class Dashboard extends Component {
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
<h4 className="mb-0">9.823</h4>
|
<h4 className="mb-0">9.823</h4>
|
||||||
<p>Members online</p>
|
<p>Members online</p>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<div className="chart-wrapper px-3" style={{height:'70px'}}>
|
<div className="chart-wrapper px-3" style={{height:'70px'}}>
|
||||||
<Line data={cardChartData2} options={cardChartOpts2} height={70}/>
|
<Line data={cardChartData2} options={cardChartOpts2} height={70}/>
|
||||||
</div>
|
</div>
|
||||||
@ -486,14 +486,14 @@ class Dashboard extends Component {
|
|||||||
|
|
||||||
<Col xs="12" sm="6" lg="3">
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Card className="text-white bg-warning">
|
<Card className="text-white bg-warning">
|
||||||
<CardBlock className="card-body pb-0">
|
<CardBody className="pb-0">
|
||||||
<ButtonGroup className="float-right">
|
<ButtonGroup className="float-right">
|
||||||
<Dropdown id='card3' isOpen={this.state.card3}
|
<Dropdown id='card3' isOpen={this.state.card3}
|
||||||
toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
|
toggle={() => { this.setState({ card3: !this.state.card3 }); }}>
|
||||||
<DropdownToggle caret className="p-0" color="transparent">
|
<DropdownToggle caret className="p-0" color="transparent">
|
||||||
<i className="icon-settings"></i>
|
<i className="icon-settings"></i>
|
||||||
</DropdownToggle>
|
</DropdownToggle>
|
||||||
<DropdownMenu className={this.state.card3 ? "show" : ""} right>
|
<DropdownMenu right>
|
||||||
<DropdownItem>Action</DropdownItem>
|
<DropdownItem>Action</DropdownItem>
|
||||||
<DropdownItem>Another action</DropdownItem>
|
<DropdownItem>Another action</DropdownItem>
|
||||||
<DropdownItem>Something else here</DropdownItem>
|
<DropdownItem>Something else here</DropdownItem>
|
||||||
@ -502,7 +502,7 @@ class Dashboard extends Component {
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
<h4 className="mb-0">9.823</h4>
|
<h4 className="mb-0">9.823</h4>
|
||||||
<p>Members online</p>
|
<p>Members online</p>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<div className="chart-wrapper px-0" style={{height:'70px'}}>
|
<div className="chart-wrapper px-0" style={{height:'70px'}}>
|
||||||
<Line data={cardChartData3} options={cardChartOpts3} height={70}/>
|
<Line data={cardChartData3} options={cardChartOpts3} height={70}/>
|
||||||
</div>
|
</div>
|
||||||
@ -511,14 +511,14 @@ class Dashboard extends Component {
|
|||||||
|
|
||||||
<Col xs="12" sm="6" lg="3">
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Card className="text-white bg-danger">
|
<Card className="text-white bg-danger">
|
||||||
<CardBlock className="card-body pb-0">
|
<CardBody className="pb-0">
|
||||||
<ButtonGroup className="float-right">
|
<ButtonGroup className="float-right">
|
||||||
<ButtonDropdown id='card4' isOpen={this.state.card4}
|
<ButtonDropdown id='card4' isOpen={this.state.card4}
|
||||||
toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
|
toggle={() => { this.setState({ card4: !this.state.card4 }); }}>
|
||||||
<DropdownToggle caret className="p-0" color="transparent">
|
<DropdownToggle caret className="p-0" color="transparent">
|
||||||
<i className="icon-settings"></i>
|
<i className="icon-settings"></i>
|
||||||
</DropdownToggle>
|
</DropdownToggle>
|
||||||
<DropdownMenu className={this.state.card4 ? "show" : ""} right>
|
<DropdownMenu right>
|
||||||
<DropdownItem>Action</DropdownItem>
|
<DropdownItem>Action</DropdownItem>
|
||||||
<DropdownItem>Another action</DropdownItem>
|
<DropdownItem>Another action</DropdownItem>
|
||||||
<DropdownItem>Something else here</DropdownItem>
|
<DropdownItem>Something else here</DropdownItem>
|
||||||
@ -527,7 +527,7 @@ class Dashboard extends Component {
|
|||||||
</ButtonGroup>
|
</ButtonGroup>
|
||||||
<h4 className="mb-0">9.823</h4>
|
<h4 className="mb-0">9.823</h4>
|
||||||
<p>Members online</p>
|
<p>Members online</p>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<div className="chart-wrapper px-3" style={{height:'70px'}}>
|
<div className="chart-wrapper px-3" style={{height:'70px'}}>
|
||||||
<Bar data={cardChartData4} options={cardChartOpts4} height={70}/>
|
<Bar data={cardChartData4} options={cardChartOpts4} height={70}/>
|
||||||
</div>
|
</div>
|
||||||
@ -537,7 +537,7 @@ class Dashboard extends Component {
|
|||||||
<Row>
|
<Row>
|
||||||
<Col>
|
<Col>
|
||||||
<Card>
|
<Card>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row>
|
<Row>
|
||||||
<Col sm="5">
|
<Col sm="5">
|
||||||
<CardTitle className="mb-0">Traffic</CardTitle>
|
<CardTitle className="mb-0">Traffic</CardTitle>
|
||||||
@ -563,7 +563,7 @@ class Dashboard extends Component {
|
|||||||
<div className="chart-wrapper" style={{height: 300 + 'px', marginTop: 40 + 'px'}}>
|
<div className="chart-wrapper" style={{height: 300 + 'px', marginTop: 40 + 'px'}}>
|
||||||
<Line data={mainChart} options={mainChartOpts} height={300}/>
|
<Line data={mainChart} options={mainChartOpts} height={300}/>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter>
|
<CardFooter>
|
||||||
<ul>
|
<ul>
|
||||||
<li>
|
<li>
|
||||||
@ -682,7 +682,7 @@ class Dashboard extends Component {
|
|||||||
<CardHeader>
|
<CardHeader>
|
||||||
Traffic {'&'} Sales
|
Traffic {'&'} Sales
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="12" md="6" xl="4">
|
<Col xs="12" md="6" xl="4">
|
||||||
<Row>
|
<Row>
|
||||||
@ -1216,7 +1216,7 @@ class Dashboard extends Component {
|
|||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</Table>
|
</Table>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Dashboard",
|
"name": "Dashboard",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Dashboard.js"
|
"main": "./Dashboard.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from 'react';
|
import React, {Component} from 'react';
|
||||||
import {Alert, Row, Col, Card, CardHeader, CardBlock} from 'reactstrap';
|
import {Alert, Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
|
||||||
|
|
||||||
|
|
||||||
class FontAwesome extends Component {
|
class FontAwesome extends Component {
|
||||||
@ -8,7 +8,7 @@ class FontAwesome extends Component {
|
|||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
<Card id="new47">
|
<Card id="new47">
|
||||||
<CardHeader>55 New Icons in 4.7</CardHeader>
|
<CardHeader>55 New Icons in 4.7</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
<Col className="fa-hover" xs="6" sm="4" md="3" lg="2">
|
<Col className="fa-hover" xs="6" sm="4" md="3" lg="2">
|
||||||
<i className="fa fa-address-book fa-lg mt-4"></i><br/>address-book
|
<i className="fa fa-address-book fa-lg mt-4"></i><br/>address-book
|
||||||
@ -176,11 +176,11 @@ class FontAwesome extends Component {
|
|||||||
<i className="fa fa-wpexplorer fa-lg mt-4"></i><br/>wpexplorer
|
<i className="fa fa-wpexplorer fa-lg mt-4"></i><br/>wpexplorer
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card id="new">
|
<Card id="new">
|
||||||
<CardHeader>20 New Icons in 4.5</CardHeader>
|
<CardHeader>20 New Icons in 4.5</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -265,12 +265,12 @@ class FontAwesome extends Component {
|
|||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
|
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="web-application">
|
<Card id="web-application">
|
||||||
<CardHeader>Web Application Icons</CardHeader>
|
<CardHeader>Web Application Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -1862,13 +1862,13 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
|
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="hand">
|
<Card id="hand">
|
||||||
<CardHeader>Hand Icons</CardHeader>
|
<CardHeader>Hand Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -1942,13 +1942,13 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
|
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="transportation">
|
<Card id="transportation">
|
||||||
<CardHeader>Transportation Icons</CardHeader>
|
<CardHeader>Transportation Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2021,12 +2021,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="gender">
|
<Card id="gender">
|
||||||
<CardHeader>Gender Icons</CardHeader>
|
<CardHeader>Gender Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2086,12 +2086,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="file-type">
|
<Card id="file-type">
|
||||||
<CardHeader>File Type Icons</CardHeader>
|
<CardHeader>File Type Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2171,12 +2171,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="spinner">
|
<Card id="spinner">
|
||||||
<CardHeader>Spinner Icons</CardHeader>
|
<CardHeader>Spinner Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Alert color="success">
|
<Alert color="success">
|
||||||
<ul className="fa-ul">
|
<ul className="fa-ul">
|
||||||
<li>
|
<li>
|
||||||
@ -2208,12 +2208,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="form-control">
|
<Card id="form-control">
|
||||||
<CardHeader>Form Control Icons</CardHeader>
|
<CardHeader>Form Control Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2261,12 +2261,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="payment">
|
<Card id="payment">
|
||||||
<CardHeader>Payment Icons</CardHeader>
|
<CardHeader>Payment Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2318,12 +2318,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="chart">
|
<Card id="chart">
|
||||||
<CardHeader>Chart Icons</CardHeader>
|
<CardHeader>Chart Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2348,12 +2348,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="currency">
|
<Card id="currency">
|
||||||
<CardHeader>Currency Icons</CardHeader>
|
<CardHeader>Currency Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2462,12 +2462,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="text-editor">
|
<Card id="text-editor">
|
||||||
<CardHeader>Text Editor Icons</CardHeader>
|
<CardHeader>Text Editor Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2669,12 +2669,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="directional">
|
<Card id="directional">
|
||||||
<CardHeader>Directional Icons</CardHeader>
|
<CardHeader>Directional Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2893,12 +2893,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="video-player">
|
<Card id="video-player">
|
||||||
<CardHeader>Video Player Icons</CardHeader>
|
<CardHeader>Video Player Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -2986,12 +2986,12 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="brand">
|
<Card id="brand">
|
||||||
<CardHeader>Brand Icons</CardHeader>
|
<CardHeader>Brand Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Alert color="warning">
|
<Alert color="warning">
|
||||||
<h4><i className="fa fa-warning"></i> Warning!</h4>
|
<h4><i className="fa fa-warning"></i> Warning!</h4>
|
||||||
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
|
Apparently, Adblock Plus can remove Font Awesome brand icons with their "Remove Social
|
||||||
@ -3637,12 +3637,12 @@ class FontAwesome extends Component {
|
|||||||
<li>Brand icons should only be used to represent the company or product to which they refer.</li>
|
<li>Brand icons should only be used to represent the company or product to which they refer.</li>
|
||||||
</ul>
|
</ul>
|
||||||
</Alert>
|
</Alert>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card id="medical">
|
<Card id="medical">
|
||||||
<CardHeader>Medical Icons</CardHeader>
|
<CardHeader>Medical Icons</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3" lg="2">
|
<Col xs="6" sm="4" md="3" lg="2">
|
||||||
@ -3690,7 +3690,7 @@ class FontAwesome extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "FontAwesome",
|
"name": "FontAwesome",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./FontAwesome.js"
|
"main": "./FontAwesome.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +1,15 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Row, Col, Card, CardHeader, CardBlock} from "reactstrap";
|
import {Row, Col, Card, CardHeader, CardBody} from 'reactstrap';
|
||||||
|
|
||||||
class SimpleLineIcons extends Component {
|
class SimpleLineIcons extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div className="animated fadeIn">
|
<div className="animated fadeIn">
|
||||||
<Card color="secondary" className="card-default">
|
<Card>
|
||||||
<CardHeader>
|
<CardHeader>
|
||||||
<i className="fa fa-picture-o"></i> Simple Line Icons
|
<i className="fa fa-picture-o"></i> Simple Line Icons
|
||||||
</CardHeader>
|
</CardHeader>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<Row className="text-center">
|
<Row className="text-center">
|
||||||
|
|
||||||
<Col xs="6" sm="4" md="3">
|
<Col xs="6" sm="4" md="3">
|
||||||
@ -745,7 +745,7 @@ class SimpleLineIcons extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
|
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SimpleLineIcons",
|
"name": "SimpleLineIcons",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SimpleLineIcons.js"
|
"main": "./SimpleLineIcons.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Container, Row, Col, CardGroup, Card, CardBlock, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
|
import {Container, Row, Col, CardGroup, Card, CardBody, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
|
||||||
|
|
||||||
|
|
||||||
class Login extends Component {
|
class Login extends Component {
|
||||||
@ -11,7 +11,7 @@ class Login extends Component {
|
|||||||
<Col md="8">
|
<Col md="8">
|
||||||
<CardGroup className="mb-0">
|
<CardGroup className="mb-0">
|
||||||
<Card className="p-4">
|
<Card className="p-4">
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<h1>Login</h1>
|
<h1>Login</h1>
|
||||||
<p className="text-muted">Sign In to your account</p>
|
<p className="text-muted">Sign In to your account</p>
|
||||||
<InputGroup className="mb-3">
|
<InputGroup className="mb-3">
|
||||||
@ -30,17 +30,17 @@ class Login extends Component {
|
|||||||
<Button color="link" className="px-0">Forgot password?</Button>
|
<Button color="link" className="px-0">Forgot password?</Button>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
<Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 44 + '%' }}>
|
<Card className="text-white bg-primary py-5 d-md-down-none" style={{ width: 44 + '%' }}>
|
||||||
<CardBlock className="card-body text-center">
|
<CardBody className="text-center">
|
||||||
<div>
|
<div>
|
||||||
<h2>Sign up</h2>
|
<h2>Sign up</h2>
|
||||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut
|
||||||
labore et dolore magna aliqua.</p>
|
labore et dolore magna aliqua.</p>
|
||||||
<Button color="primary" className="mt-3" active>Register Now!</Button>
|
<Button color="primary" className="mt-3" active>Register Now!</Button>
|
||||||
</div>
|
</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
</CardGroup>
|
</CardGroup>
|
||||||
</Col>
|
</Col>
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Login",
|
"name": "Login",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Login.js"
|
"main": "./Login.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from "reactstrap";
|
import {Container, Row, Col, Button, Input, InputGroupAddon, InputGroup, InputGroupButton} from 'reactstrap';
|
||||||
|
|
||||||
class Page404 extends Component {
|
class Page404 extends Component {
|
||||||
render() {
|
render() {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Page404",
|
"name": "Page404",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Page404.js"
|
"main": "./Page404.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from "reactstrap";
|
import {Container, Row, Col, Button, Input, InputGroup, InputGroupAddon, InputGroupButton} from 'reactstrap';
|
||||||
|
|
||||||
class Page500 extends Component {
|
class Page500 extends Component {
|
||||||
render() {
|
render() {
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Page500",
|
"name": "Page500",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Page500.js"
|
"main": "./Page500.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Container, Row, Col, Card, CardBlock, CardFooter, Button, Input, InputGroup, InputGroupAddon} from "reactstrap";
|
import {Container, Row, Col, Card, CardBody, CardFooter, Button, Input, InputGroup, InputGroupAddon} from 'reactstrap';
|
||||||
|
|
||||||
class Register extends Component {
|
class Register extends Component {
|
||||||
render() {
|
render() {
|
||||||
@ -9,7 +9,7 @@ class Register extends Component {
|
|||||||
<Row className="justify-content-center">
|
<Row className="justify-content-center">
|
||||||
<Col md="6">
|
<Col md="6">
|
||||||
<Card className="mx-4">
|
<Card className="mx-4">
|
||||||
<CardBlock className="card-body p-4">
|
<CardBody className="p-4">
|
||||||
<h1>Register</h1>
|
<h1>Register</h1>
|
||||||
<p className="text-muted">Create your account</p>
|
<p className="text-muted">Create your account</p>
|
||||||
<InputGroup className="mb-3">
|
<InputGroup className="mb-3">
|
||||||
@ -29,7 +29,7 @@ class Register extends Component {
|
|||||||
<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>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
<CardFooter className="p-4">
|
<CardFooter className="p-4">
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="12" sm="6">
|
<Col xs="12" sm="6">
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Register",
|
"name": "Register",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Register.js"
|
"main": "./Register.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {Card, CardBlock, Progress} from "reactstrap";
|
import {Card, CardBody, Progress} from 'reactstrap';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {mapToCssModules} from 'reactstrap/lib/utils';
|
import {mapToCssModules} from 'reactstrap/lib/utils';
|
||||||
|
|
||||||
@ -45,13 +45,13 @@ class Widget01 extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={ classes } {...attributes}>
|
<Card className={ classes } {...attributes}>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="h4 m-0">{ header }</div>
|
<div className="h4 m-0">{ header }</div>
|
||||||
<div>{ mainText }</div>
|
<div>{ mainText }</div>
|
||||||
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
|
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
|
||||||
<small className="text-muted">{ smallText }</small>
|
<small className="text-muted">{ smallText }</small>
|
||||||
<div>{children}</div>
|
<div>{children}</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {Card, CardBlock, CardFooter} from "reactstrap";
|
import {Card, CardBody, CardFooter} from 'reactstrap';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {mapToCssModules} from 'reactstrap/lib/utils';
|
import {mapToCssModules} from 'reactstrap/lib/utils';
|
||||||
|
|
||||||
@ -34,7 +34,7 @@ class Widget02 extends Component {
|
|||||||
const padding = (variant === '0' ? {card: "p-3", icon: "p-3", lead: "mt-2"} : ( variant === "1" ? {
|
const padding = (variant === '0' ? {card: "p-3", icon: "p-3", lead: "mt-2"} : ( variant === "1" ? {
|
||||||
card: "p-0", icon: "p-4", lead: "pt-3" } : {card: "p-0", icon: "p-4 px-5", lead: "pt-3"}));
|
card: "p-0", icon: "p-4", lead: "pt-3" } : {card: "p-0", icon: "p-4 px-5", lead: "pt-3"}));
|
||||||
|
|
||||||
const card = {style: "card-body clearfix", color: color, icon: icon, classes: ""};
|
const card = {style: "clearfix", color: color, icon: icon, classes: ""};
|
||||||
card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);
|
card.classes = mapToCssModules(classNames(className, card.style, padding.card), cssModule);
|
||||||
|
|
||||||
const lead = {style: "h5 mb-0", color: color, classes: ""};
|
const lead = {style: "h5 mb-0", color: color, classes: ""};
|
||||||
@ -58,11 +58,11 @@ class Widget02 extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card>
|
<Card>
|
||||||
<CardBlock className={ card.classes } {...attributes}>
|
<CardBody className={ card.classes } {...attributes}>
|
||||||
{ blockIcon(card.icon) }
|
{ blockIcon(card.icon) }
|
||||||
<div className={ lead.classes }>{ header }</div>
|
<div className={ lead.classes }>{ header }</div>
|
||||||
<div className="text-muted text-uppercase font-weight-bold font-xs">{ mainText }</div>
|
<div className="text-muted text-uppercase font-weight-bold font-xs">{ mainText }</div>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
{ cardFooter() }
|
{ cardFooter() }
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
|
|||||||
@ -1,4 +1,4 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {mapToCssModules} from 'reactstrap/lib/utils';
|
import {mapToCssModules} from 'reactstrap/lib/utils';
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import {Card, CardBlock, Progress} from "reactstrap";
|
import {Card, CardBody, Progress} from 'reactstrap';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import {mapToCssModules} from 'reactstrap/lib/utils';
|
import {mapToCssModules} from 'reactstrap/lib/utils';
|
||||||
|
|
||||||
@ -44,14 +44,14 @@ class Widget04 extends Component {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<Card className={ classes } {...attributes}>
|
<Card className={ classes } {...attributes}>
|
||||||
<CardBlock className="card-body">
|
<CardBody>
|
||||||
<div className="h1 text-muted text-right mb-2">
|
<div className="h1 text-muted text-right mb-2">
|
||||||
<i className={ card.icon }></i>
|
<i className={ card.icon }></i>
|
||||||
</div>
|
</div>
|
||||||
<div className="h4 mb-0">{ header }</div>
|
<div className="h4 mb-0">{ header }</div>
|
||||||
<small className="text-muted text-uppercase font-weight-bold">{ children }</small>
|
<small className="text-muted text-uppercase font-weight-bold">{ children }</small>
|
||||||
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
|
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
|
||||||
</CardBlock>
|
</CardBody>
|
||||||
</Card>
|
</Card>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
import React, {Component} from "react";
|
import React, {Component} from 'react';
|
||||||
import {Row, Col, CardGroup} from "reactstrap";
|
import {Row, Col, CardGroup} from 'reactstrap';
|
||||||
import Widget01 from './Widget01';
|
import Widget01 from './Widget01';
|
||||||
import Widget02 from './Widget02';
|
import Widget02 from './Widget02';
|
||||||
import Widget03 from './Widget03';
|
import Widget03 from './Widget03';
|
||||||
@ -68,28 +68,28 @@ class Widgets extends Component {
|
|||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
<Row>
|
<Row>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="1"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="1"/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="1"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="1"/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="1"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="1"/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="1"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="1"/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="2"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-cogs" color="primary" variant="2"/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="2"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-laptop" color="info" variant="2"/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="2"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-moon-o" color="warning" variant="2"/>
|
||||||
</Col>
|
</Col>
|
||||||
<Col xs="12" sm="6" >
|
<Col xs="12" sm="6" lg="3">
|
||||||
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="2"/>
|
<Widget02 header="$1.999,50" mainText="Income" icon="fa fa-bell" color="danger" variant="2"/>
|
||||||
</Col>
|
</Col>
|
||||||
</Row>
|
</Row>
|
||||||
@ -159,4 +159,4 @@ class Widgets extends Component {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Widgets;
|
export default Widgets;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Widgets",
|
"name": "Widgets",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Widgets.js"
|
"main": "./Widgets.js"
|
||||||
}
|
}
|
||||||
|
|||||||
1
React_Starter/.gitignore
vendored
1
React_Starter/.gitignore
vendored
@ -2,6 +2,7 @@
|
|||||||
|
|
||||||
# dependencies
|
# dependencies
|
||||||
node_modules
|
node_modules
|
||||||
|
package-lock.json
|
||||||
|
|
||||||
# testing
|
# testing
|
||||||
coverage
|
coverage
|
||||||
|
|||||||
@ -1,35 +0,0 @@
|
|||||||
### Changelog [react](./REACT.md) version
|
|
||||||
|
|
||||||
#### 2017.08.26
|
|
||||||
- Sidebar component:
|
|
||||||
- item with optional class (_nav.js)
|
|
||||||
- nav link with optional variant (_nav.js)
|
|
||||||
- external urls allowed (_nav.js)
|
|
||||||
- optional SidebarFooter, SidebarHeader, SidebarForm components
|
|
||||||
- SidebarMinimizer component
|
|
||||||
- .brand-minimized
|
|
||||||
- .sidebar-minimized,
|
|
||||||
- Header component - sidebarMinimize
|
|
||||||
- react-transition-group downgrade to v1 : (modals and alerts reactstrap:v4.8 issue)
|
|
||||||
|
|
||||||
#### 2017.08.24
|
|
||||||
- webpack.config env.prod
|
|
||||||
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
|
||||||
- callout.scss .chart-wrapper hotfix (full)
|
|
||||||
|
|
||||||
#### 2017.08.11
|
|
||||||
- Bootstrap 4 beta
|
|
||||||
- Dashboard component (full):
|
|
||||||
- line chart for social box
|
|
||||||
- sparkline chart for callout
|
|
||||||
|
|
||||||
#### 2017.08.01
|
|
||||||
- Sidebar component:
|
|
||||||
- title item with optional wrapper and class (_nav.js)
|
|
||||||
- nav link item with optional badge
|
|
||||||
- code refactoring
|
|
||||||
|
|
||||||
#### 2017.07.31
|
|
||||||
- moved to [reactstrap](https://reactstrap.github.io/)
|
|
||||||
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
|
||||||
- data driven Sidebar component (_nav.js)
|
|
||||||
@ -1,36 +0,0 @@
|
|||||||
# React version
|
|
||||||
|
|
||||||
## Intro
|
|
||||||
|
|
||||||
It uses Sass (with .scss). The style is loaded at the component level.
|
|
||||||
|
|
||||||
Dependencies can be handled by **npm**.
|
|
||||||
|
|
||||||
## Directories
|
|
||||||
|
|
||||||
```
|
|
||||||
src (js|jsx source)
|
|
||||||
scss (scss source)
|
|
||||||
public (html template)
|
|
||||||
public/img (images)
|
|
||||||
```
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
**npm i** - to install dependencies
|
|
||||||
|
|
||||||
## Sctipts
|
|
||||||
|
|
||||||
**npm start** for developing (it runs webpack-dev-server)
|
|
||||||
|
|
||||||
**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
|
|
||||||
|
|
||||||
[Changelog](./CHANGELOG.md)
|
|
||||||
[Readme](./README.md)
|
|
||||||
@ -14,22 +14,22 @@
|
|||||||
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
"babel-plugin-transform-object-rest-spread": "^6.26.0",
|
||||||
"babel-preset-env": "^1.6.0",
|
"babel-preset-env": "^1.6.0",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"copy-webpack-plugin": "^4.0.1",
|
"copy-webpack-plugin": "^4.1.1",
|
||||||
"css-hot-loader": "^1.3.1",
|
"css-hot-loader": "^1.3.2",
|
||||||
"css-loader": "^0.28.7",
|
"css-loader": "^0.28.7",
|
||||||
"extract-text-webpack-plugin": "^3.0.0",
|
"extract-text-webpack-plugin": "^3.0.1",
|
||||||
"file-loader": "^0.11.2",
|
"file-loader": "^1.1.5",
|
||||||
"html-loader": "^0.5.1",
|
"html-loader": "^0.5.1",
|
||||||
"html-webpack-plugin": "^2.30.1",
|
"html-webpack-plugin": "^2.30.1",
|
||||||
"node-sass": "^4.5.3",
|
"node-sass": "^4.5.3",
|
||||||
"rimraf": "^2.6.2",
|
"rimraf": "^2.6.2",
|
||||||
"sass-loader": "^6.0.6",
|
"sass-loader": "^6.0.6",
|
||||||
"source-list-map": "^2.0.0",
|
"source-list-map": "^2.0.0",
|
||||||
"style-loader": "^0.18.2",
|
"style-loader": "^0.19.0",
|
||||||
"uglify-js": "^3.1.1",
|
"uglify-js": "^3.1.3",
|
||||||
"url-loader": "^0.5.9",
|
"url-loader": "^0.6.2",
|
||||||
"webpack": "^3.6.0",
|
"webpack": "^3.6.0",
|
||||||
"webpack-dev-server": "^2.8.2"
|
"webpack-dev-server": "^2.9.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.0.0-beta",
|
"bootstrap": "^4.0.0-beta",
|
||||||
@ -37,12 +37,12 @@
|
|||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"history": "4.7.2",
|
"history": "4.7.2",
|
||||||
"is-url-external": "^1.0.3",
|
"is-url-external": "^1.0.3",
|
||||||
"react": "^15.6.1",
|
"react": "^16.0.0",
|
||||||
"react-chartjs-2": "2.6.2",
|
"react-chartjs-2": "2.6.4",
|
||||||
"react-dom": "^15.6.1",
|
"react-dom": "^16.0.0",
|
||||||
"react-router-dom": "4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-transition-group": "^1.2.0",
|
"react-transition-group": "^2.2.1",
|
||||||
"reactstrap": "^4.8.0",
|
"reactstrap": "^5.0.0-alpha.3",
|
||||||
"simple-line-icons": "^2.4.1"
|
"simple-line-icons": "^2.4.1"
|
||||||
},
|
},
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
// Temp fix for reactstrap
|
// Temp fix for reactstrap
|
||||||
.show {
|
.app-header {
|
||||||
> .dropdown-menu-right {
|
.navbar-nav {
|
||||||
right: 0;
|
.dropdown-menu-right {
|
||||||
left: auto; // Reset the default from `.dropdown-menu`
|
right: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1,8 +1,9 @@
|
|||||||
.app-footer {
|
.app-footer {
|
||||||
min-height: $footer-height;
|
display: flex;
|
||||||
padding: 0 $spacer;
|
padding: 0 $spacer;
|
||||||
line-height: $footer-height;
|
|
||||||
color: $footer-color;
|
color: $footer-color;
|
||||||
background: $footer-bg;
|
background: $footer-bg;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
@include borders($footer-borders);
|
@include borders($footer-borders);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,8 +11,8 @@
|
|||||||
app-dashboard,
|
app-dashboard,
|
||||||
app-root {
|
app-root {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header {
|
.app-header {
|
||||||
@ -26,12 +26,12 @@ app-root {
|
|||||||
.app-body {
|
.app-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-grow: 1;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@ -328,7 +328,8 @@ app-root {
|
|||||||
margin-top: $navbar-height;
|
margin-top: $navbar-height;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar,
|
||||||
|
.sidebar-fixed .sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.app-header.navbar {
|
.app-header.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: row;
|
|
||||||
height: $navbar-height;
|
height: $navbar-height;
|
||||||
|
flex-direction: row;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $navbar-bg;
|
background-color: $navbar-bg;
|
||||||
@ -102,13 +102,16 @@
|
|||||||
background-color: rgba(0,0,0,.075);
|
background-color: rgba(0,0,0,.075);
|
||||||
}
|
}
|
||||||
|
|
||||||
.brand-minimized {
|
@include media-breakpoint-up(lg) {
|
||||||
.app-header.navbar {
|
.brand-minimized {
|
||||||
.navbar-brand {
|
.app-header.navbar {
|
||||||
width: $navbar-brand-minimized-width;
|
.navbar-brand {
|
||||||
background-color: $navbar-brand-minimized-bg;
|
width: $navbar-brand-minimized-width;
|
||||||
background-image: $navbar-brand-minimized-logo;
|
background-color: $navbar-brand-minimized-bg;
|
||||||
background-size: $navbar-brand-minimized-logo-size;
|
background-image: $navbar-brand-minimized-logo;
|
||||||
|
background-size: $navbar-brand-minimized-logo-size;
|
||||||
|
@include borders($navbar-brand-minimized-border);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -78,8 +78,8 @@
|
|||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
@ -254,6 +254,7 @@
|
|||||||
flex: 0 0 $sidebar-footer-height;
|
flex: 0 0 $sidebar-footer-height;
|
||||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
||||||
background: $sidebar-footer-bg;
|
background: $sidebar-footer-bg;
|
||||||
|
@include borders($sidebar-footer-borders);
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-minimizer {
|
.sidebar-minimizer {
|
||||||
@ -261,6 +262,7 @@
|
|||||||
flex: 0 0 $sidebar-minimizer-height;
|
flex: 0 0 $sidebar-minimizer-height;
|
||||||
background-color: $sidebar-minimizer-bg;
|
background-color: $sidebar-minimizer-bg;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@include borders($sidebar-minimizer-borders);
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|||||||
@ -58,10 +58,11 @@ $navbar-brand-border: (
|
|||||||
)
|
)
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
$navbar-brand-minimized-width: 50px !default
|
$navbar-brand-minimized-width: 50px !default;
|
||||||
$navbar-brand-minimized-bg: #fff !default;
|
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
|
||||||
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
||||||
$navbar-brand-minimized-logo-size: 24px !default;
|
$navbar-brand-minimized-logo-size: 24px !default;
|
||||||
|
$navbar-brand-minimized-border: $navbar-brand-border !default;
|
||||||
|
|
||||||
$navbar-color: $gray-600 !default;
|
$navbar-color: $gray-600 !default;
|
||||||
$navbar-hover-color: $gray-800 !default;
|
$navbar-hover-color: $gray-800 !default;
|
||||||
@ -132,11 +133,13 @@ $sidebar-footer-height: auto !default;
|
|||||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||||
$sidebar-footer-padding-y: .75rem !default;
|
$sidebar-footer-padding-y: .75rem !default;
|
||||||
$sidebar-footer-padding-x: 1rem !default;
|
$sidebar-footer-padding-x: 1rem !default;
|
||||||
|
$sidebar-footer-borders: 0 !default;
|
||||||
|
|
||||||
// Sidebar Minimizer
|
// Sidebar Minimizer
|
||||||
|
|
||||||
$sidebar-minimizer-height: 50px !default;
|
$sidebar-minimizer-height: 50px !default;
|
||||||
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
|
||||||
|
$sidebar-minimizer-borders: 0 !default;
|
||||||
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
$sidebar-minimizer-indicator-color: $gray-600 !default;
|
||||||
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||||
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
/*!
|
/*!
|
||||||
* CoreUI - Open Source Bootstrap Admin Template
|
* CoreUI - Open Source Bootstrap Admin Template
|
||||||
* @version v1.0.0
|
* @version v1.0.1
|
||||||
* @link http://coreui.io
|
* @link http://coreui.io
|
||||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||||
* @license MIT
|
* @license MIT
|
||||||
@ -11,23 +11,17 @@
|
|||||||
// Import Bootstrap source files
|
// Import Bootstrap source files
|
||||||
@import "bootstrap/bootstrap";
|
@import "bootstrap/bootstrap";
|
||||||
|
|
||||||
// If you want you can import bootstrap scss files directly from node_modules or bower_components.
|
// If you want you can import bootstrap scss files directly from node_modules.
|
||||||
// To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
|
// To do this please remove @import "bootstrap/bootstrap"; and uncomment proper line.
|
||||||
|
|
||||||
// Import Bootstrap source files from node_modules
|
// Import Bootstrap source files from node_modules
|
||||||
// @import "node_modules/bootstrap/scss/bootstrap";
|
// @import "node_modules/bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
// Import Bootstrap source files from bower_components
|
|
||||||
// @import "bower_components/bootstrap/scss/bootstrap";
|
|
||||||
|
|
||||||
// Override core variables
|
// Override core variables
|
||||||
@import "core-variables";
|
@import "core-variables";
|
||||||
|
|
||||||
// Import core styles
|
// Import core styles
|
||||||
@import "core/core";
|
@import "core/core";
|
||||||
|
|
||||||
// Import vendors styles
|
|
||||||
@import "vendors/vendors";
|
|
||||||
|
|
||||||
// Custom styles
|
// Custom styles
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|||||||
9
React_Starter/scss/vendors/_variables.scss
vendored
Normal file
9
React_Starter/scss/vendors/_variables.scss
vendored
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
// @import "node_modules/bootstrap/scss/bootstrap/functions";
|
||||||
|
@import "../bootstrap/functions";
|
||||||
|
@import "../bootstrap-variables";
|
||||||
|
// @import "node_modules/bootstrap/scss/bootstrap/variables";
|
||||||
|
@import "../bootstrap/variables";
|
||||||
|
// @import "node_modules/bootstrap/scss/bootstrap/mixins";
|
||||||
|
@import "../bootstrap/mixins";
|
||||||
|
@import "../core-variables";
|
||||||
|
@import "../core/variables";
|
||||||
1
React_Starter/scss/vendors/_vendors.scss
vendored
1
React_Starter/scss/vendors/_vendors.scss
vendored
@ -1 +0,0 @@
|
|||||||
@import "chart.js/chart";
|
|
||||||
@ -1,3 +1,6 @@
|
|||||||
|
// Import variables
|
||||||
|
@import '../variables';
|
||||||
|
|
||||||
.chart-legend,
|
.chart-legend,
|
||||||
.bar-legend,
|
.bar-legend,
|
||||||
.line-legend,
|
.line-legend,
|
||||||
|
|||||||
@ -5,7 +5,7 @@ class Aside extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<aside className="aside-menu">
|
<aside className="aside-menu">
|
||||||
Aside Menu
|
{/*Aside Menu*/}
|
||||||
</aside>
|
</aside>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Aside",
|
"name": "Aside",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Aside.js"
|
"main": "./Aside.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Breadcrumb",
|
"name": "Breadcrumb",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Breadcrumb.js"
|
"main": "./Breadcrumb.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -4,8 +4,8 @@ class Footer extends Component {
|
|||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<footer className="app-footer">
|
<footer className="app-footer">
|
||||||
<a href="http://coreui.io">CoreUI</a> © 2017 creativeLabs.
|
<span><a href="http://coreui.io">CoreUI</a> © 2017 creativeLabs.</span>
|
||||||
<span className="float-right">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
<span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||||
</footer>
|
</footer>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Footer",
|
"name": "Footer",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Footer.js"
|
"main": "./Footer.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -34,6 +34,7 @@ class Header extends Component {
|
|||||||
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
||||||
<NavbarBrand href="#"></NavbarBrand>
|
<NavbarBrand href="#"></NavbarBrand>
|
||||||
<NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>☰</NavbarToggler>
|
<NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>☰</NavbarToggler>
|
||||||
|
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>☰</NavbarToggler>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Header",
|
"name": "Header",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Header.js"
|
"main": "./Header.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -17,7 +17,6 @@ class Sidebar extends Component {
|
|||||||
}
|
}
|
||||||
|
|
||||||
activeRoute(routeName, props) {
|
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';
|
return props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Sidebar",
|
"name": "Sidebar",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Sidebar.js"
|
"main": "./Sidebar.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarFooter",
|
"name": "SidebarFooter",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarFooter.js"
|
"main": "./SidebarFooter.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarForm",
|
"name": "SidebarForm",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarForm.js"
|
"main": "./SidebarForm.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarHeader",
|
"name": "SidebarHeader",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarHeader.js"
|
"main": "./SidebarHeader.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "SidebarMinimizer",
|
"name": "SidebarMinimizer",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./SidebarMinimizer.js"
|
"main": "./SidebarMinimizer.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Full",
|
"name": "Full",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Full.js"
|
"main": "./Full.js"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "Dashboard",
|
"name": "Dashboard",
|
||||||
"version": "1.0.0",
|
"version": "1.0.1",
|
||||||
"private": true,
|
"private": true,
|
||||||
"main": "./Dashboard.js"
|
"main": "./Dashboard.js"
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user