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

v2.0.0-alpha.2

Browse Source 
- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
- refactor: ButtonDropdowns `<Dropdown direction="up">` (deprecate 'dropup')
- refactor: Dashboard legend badge pill
- refactor: SocialButtons to BrandButtons `btn-brand`
- refactor: Buttons spacing `mr-1`
- update: reactstrap to `5.0.0`
- update: react, react-dom to `16.3.1`
- update: node-sass-chokidar to `1.1.0`
- update: prop-types to `15.5.8`
- update: react-scripts to `1.1.4`
This commit is contained in:
xidedix 2018-04-09 13:30:56 +02:00
parent e1b0c8d306
commit c46cb8400e
16 changed files with 456 additions and 389 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
CHANGELOG.md
View File

@ -1,5 +1,17 @@
## [react](./REACT.md) version `changelog` ## [react](./REACT.md) version `changelog`
##### `v2.0.0-alpha.2`
- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
- refactor: ButtonDropdowns `<Dropdown direction="up">` (deprecate 'dropup')
- refactor: Dashboard legend badge pill
- refactor: SocialButtons to BrandButtons `btn-brand`
- refactor: Buttons spacing `mr-1`
- update: reactstrap to `5.0.0`
- update: react, react-dom to `16.3.1`
- update: node-sass-chokidar to `1.1.0`
- update: prop-types to `15.5.8`
- update: react-scripts to `1.1.4`
##### `v2.0.0-alpha.1` ##### `v2.0.0-alpha.1`
- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency - refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
- refactor: project structure change - refactor: project structure change

20
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "CoreUI-React", "name": "CoreUI-React",
"version": "2.0.0-alpha.1", "version": "2.0.0-alpha.2",
"description": "CoreUI React Open Source Bootstrap 4 Admin Template", "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
"author": "Łukasz Holeczek", "author": "Łukasz Holeczek",
"homepage": "http://coreui.io", "homepage": "http://coreui.io",
@ -15,19 +15,19 @@
"@coreui/styles": "next", "@coreui/styles": "next",
"@coreui/react": "next", "@coreui/react": "next",
"bootstrap": "4.0.0", "bootstrap": "4.0.0",
"chart.js": "2.7.2", "chart.js": "^2.7.2",
"classnames": "^2.2.3", "classnames": "^2.2.3",
"flag-icon-css": "3.0.0", "flag-icon-css": "^3.0.0",
"font-awesome": "^4.7.0", "font-awesome": "^4.7.0",
"node-sass-chokidar": "^1.1.0", "node-sass-chokidar": "^1.2.2",
"prop-types": "^15.5.8", "prop-types": "^15.6.1",
"react": "^16.2.0", "react": "^16.3.1",
"react-chartjs-2": "2.7.0", "react-chartjs-2": "^2.7.0",
"react-dom": "^16.2.0", "react-dom": "^16.3.1",
"react-router-config": "^1.0.0-beta.4", "react-router-config": "^1.0.0-beta.4",
"react-router-dom": "^4.2.2", "react-router-dom": "^4.2.2",
"react-scripts": "1.1.1", "react-scripts": "^1.1.4",
"reactstrap": "5.0.0-beta", "reactstrap": "^5.0.0",
"simple-line-icons": "^2.4.1" "simple-line-icons": "^2.4.1"
}, },
"devDependencies": { "devDependencies": {

6
public/index.html
View File

@ -4,10 +4,10 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="%THEMENAME% - %THEMEDESC%"> <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
<meta name="author" content="Łukasz Holeczek"> <meta name="author" content="Łukasz Holeczek">
<meta name="keyword" content="%THEMEKEYWORDS%"> <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
<title>%THEMENAME% - %THEMEDESC%</title> <title>CoreUI for React</title>
<!-- <!--
manifest.json provides metadata used when your web app is added to the manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/ homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/

4
src/_nav.js
View File

@ -144,8 +144,8 @@ export default {
icon: 'icon-cursor', icon: 'icon-cursor',
}, },
{ {
name: 'Social Buttons', name: 'Brand Buttons',
url: '/buttons/social-buttons', url: '/buttons/brand-buttons',
icon: 'icon-cursor', icon: 'icon-cursor',
}, },
], ],

2
src/containers/Full/FullHeader.js
View File

@ -45,7 +45,7 @@ class FullHeader 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>
<AppHeaderDropdown> <AppHeaderDropdown direction="down">
<DropdownToggle nav> <DropdownToggle nav>
<img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" /> <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
</DropdownToggle> </DropdownToggle>

4
src/routes.js
View File

@ -24,7 +24,7 @@ import {
Popovers, Popovers,
ProgressBar, ProgressBar,
SimpleLineIcons, SimpleLineIcons,
SocialButtons, BrandButtons,
Switches, Switches,
Tables, Tables,
Tabs, Tabs,
@ -63,7 +63,7 @@ const routes = [
{ path: '/buttons/buttons', name: 'Buttons', component: Buttons }, { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
{ path: '/buttons/button-dropdowns', name: 'ButtonDropdowns', component: ButtonDropdowns }, { path: '/buttons/button-dropdowns', name: 'ButtonDropdowns', component: ButtonDropdowns },
{ path: '/buttons/button-groups', name: 'ButtonGroups', component: ButtonGroups }, { path: '/buttons/button-groups', name: 'ButtonGroups', component: ButtonGroups },
{ path: '/buttons/social-buttons', name: 'Social Buttons', component: SocialButtons }, { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
{ path: '/icons', exact: true, name: 'Icons', component: Flags }, { path: '/icons', exact: true, name: 'Icons', component: Flags },
{ path: '/icons/flags', name: 'Flags', component: Flags }, { path: '/icons/flags', name: 'Flags', component: Flags },
{ path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome }, { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },

31
src/scss/style.css
View File

@ -3680,12 +3680,15 @@ button.close {
.bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow { .bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow {
bottom: calc((0.5rem + 1px) * -1); } bottom: calc((0.5rem + 1px) * -1); }
.bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before, .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before,
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after { .bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
border-width: 0.5rem 0.5rem 0; } border-width: 0.5rem 0.5rem 0; }
.bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before { .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before {
bottom: 0; bottom: 0;
border-top-color: rgba(0, 0, 0, 0.25); } border-top-color: rgba(0, 0, 0, 0.25); }
.bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
.bs-popover-top .arrow::after,
.bs-popover-auto[x-placement^="top"] .arrow::after {
bottom: 1px; bottom: 1px;
border-top-color: #fff; } border-top-color: #fff; }
@ -3697,12 +3700,15 @@ button.close {
height: 1rem; height: 1rem;
margin: 0.3rem 0; } margin: 0.3rem 0; }
.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before, .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before,
.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after { .bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
border-width: 0.5rem 0.5rem 0.5rem 0; } border-width: 0.5rem 0.5rem 0.5rem 0; }
.bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before { .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
left: 0; left: 0;
border-right-color: rgba(0, 0, 0, 0.25); } border-right-color: rgba(0, 0, 0, 0.25); }
.bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
.bs-popover-right .arrow::after,
.bs-popover-auto[x-placement^="right"] .arrow::after {
left: 1px; left: 1px;
border-right-color: #fff; } border-right-color: #fff; }
@ -3711,12 +3717,15 @@ button.close {
.bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow { .bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow {
top: calc((0.5rem + 1px) * -1); } top: calc((0.5rem + 1px) * -1); }
.bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before, .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before,
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after { .bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
border-width: 0 0.5rem 0.5rem 0.5rem; } border-width: 0 0.5rem 0.5rem 0.5rem; }
.bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before { .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before {
top: 0; top: 0;
border-bottom-color: rgba(0, 0, 0, 0.25); } border-bottom-color: rgba(0, 0, 0, 0.25); }
.bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
.bs-popover-bottom .arrow::after,
.bs-popover-auto[x-placement^="bottom"] .arrow::after {
top: 1px; top: 1px;
border-bottom-color: #fff; } border-bottom-color: #fff; }
.bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before { .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@ -3737,12 +3746,15 @@ button.close {
height: 1rem; height: 1rem;
margin: 0.3rem 0; } margin: 0.3rem 0; }
.bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before, .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before,
.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after { .bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
border-width: 0.5rem 0 0.5rem 0.5rem; } border-width: 0.5rem 0 0.5rem 0.5rem; }
.bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before { .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before {
right: 0; right: 0;
border-left-color: rgba(0, 0, 0, 0.25); } border-left-color: rgba(0, 0, 0, 0.25); }
.bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
.bs-popover-left .arrow::after,
.bs-popover-auto[x-placement^="left"] .arrow::after {
right: 1px; right: 1px;
border-left-color: #fff; } border-left-color: #fff; }
@ -8095,7 +8107,8 @@ base-chart.chart {
left: 8px; } left: 8px; }
.switch-pill .switch-label, .switch.switch-3d .switch-label, .switch-pill .switch-label, .switch.switch-3d .switch-label,
.switch-pill .switch-handle, .switch.switch-3d .switch-handle { .switch-pill .switch-handle,
.switch.switch-3d .switch-handle {
border-radius: 50em; } border-radius: 50em; }
.switch-pill .switch-label::before, .switch.switch-3d .switch-label::before { .switch-pill .switch-label::before, .switch.switch-3d .switch-label::before {

324
src/views/Buttons/BrandButtons/BrandButtons.js Normal file
View File

@ -0,0 +1,324 @@
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class BrandButtons extends Component {
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i>
<strong>Brand Button</strong>
<small> Usage ex. </small>
<code>
&lt;Button className="btn-facebook btn-brand"&gt;&lt;i className="fa fa-facebook"&gt;&lt;/i&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/Button&gt;
</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small> Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
<Button size="sm" className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
<Button size="sm" className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
<Button size="sm" className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
<Button size="sm" className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
<Button size="sm" className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
<Button size="sm" className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
<Button size="sm" className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
<Button size="sm" className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
<Button size="sm" className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
<Button size="sm" className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
<Button size="sm" className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
<Button size="sm" className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
<Button size="sm" className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
<Button size="sm" className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
<Button size="sm" className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
<Button size="sm" className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
<Button size="sm" className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
<Button size="sm" className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
<Button size="sm" className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
<Button size="sm" className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
<Button size="sm" className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
<Button size="sm" className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
<Button size="sm" className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
<Button size="sm" className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
<Button className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
<Button className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
<Button className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
<Button className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
<Button className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
<Button className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
<Button className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
<Button className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
<Button className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
<Button className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
<Button className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
<Button className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
<Button className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
<Button className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
<Button className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
<Button className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
<Button className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
<Button className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
<Button className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
<Button className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
<Button className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
<Button className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
<Button className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
<Button className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
</p>
<h6>Size Large
<small> Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
<Button size="lg" className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
<Button size="lg" className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
<Button size="lg" className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
<Button size="lg" className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
<Button size="lg" className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
<Button size="lg" className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
<Button size="lg" className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
<Button size="lg" className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
<Button size="lg" className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
<Button size="lg" className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
<Button size="lg" className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
<Button size="lg" className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
<Button size="lg" className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
<Button size="lg" className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
<Button size="lg" className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
<Button size="lg" className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
<Button size="lg" className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
<Button size="lg" className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
<Button size="lg" className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
<Button size="lg" className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
<Button size="lg" className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
<Button size="lg" className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
<Button size="lg" className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
</p>
</CardBody>
</Card>
</Col>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i>
<strong>Brand Button</strong>
<small> Icons only. Usage ex. </small>
<code>
&lt;Button className="btn-facebook btn-brand icon"&gt;&lt;i className="fa fa-facebook"&gt;&lt;/i&gt;&lt;/Button&gt;
</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small> Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
<Button size="sm" className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
<Button size="sm" className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
<Button size="sm" className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
<Button size="sm" className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
<Button size="sm" className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
<Button size="sm" className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
<Button size="sm" className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
<Button size="sm" className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
<Button size="sm" className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
<Button size="sm" className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
<Button size="sm" className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
<Button size="sm" className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
<Button size="sm" className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
<Button size="sm" className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
<Button size="sm" className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
<Button size="sm" className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
<Button size="sm" className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
<Button size="sm" className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
<Button size="sm" className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
<Button size="sm" className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
<Button size="sm" className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
<Button size="sm" className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
<Button size="sm" className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
<Button size="sm" className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
<Button className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
<Button className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
<Button className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
<Button className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
<Button className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
<Button className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
<Button className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
<Button className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
<Button className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
<Button className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
<Button className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
<Button className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
<Button className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
<Button className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
<Button className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
<Button className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
<Button className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
<Button className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
<Button className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
<Button className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
<Button className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
<Button className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
<Button className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
<Button className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
</p>
<h6>Size Large
<small> Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
<Button size="lg" className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
<Button size="lg" className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
<Button size="lg" className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
<Button size="lg" className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
<Button size="lg" className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
<Button size="lg" className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
<Button size="lg" className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
<Button size="lg" className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
<Button size="lg" className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
<Button size="lg" className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
<Button size="lg" className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
<Button size="lg" className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
<Button size="lg" className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
<Button size="lg" className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
<Button size="lg" className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
<Button size="lg" className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
<Button size="lg" className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
<Button size="lg" className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
<Button size="lg" className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
<Button size="lg" className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
<Button size="lg" className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
<Button size="lg" className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
<Button size="lg" className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
<Button size="lg" className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
</p>
</CardBody>
</Card>
</Col>
<Col xs="12">
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i>
<strong>Brand Button</strong>
<small> Text only. Usage ex. </small>
<code>
&lt;Button className="btn-facebook btn-brand text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/Button&gt;
</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small> Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
<Button size="sm" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
<Button size="sm" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
<Button size="sm" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
<Button size="sm" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
<Button size="sm" className="btn-xing btn-brand text"><span>Xing</span></Button>
<Button size="sm" className="btn-github btn-brand text"><span>Github</span></Button>
<Button size="sm" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
<Button size="sm" className="btn-openid btn-brand text"><span>OpenID</span></Button>
<Button size="sm" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
<Button size="sm" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
<Button size="sm" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
<Button size="sm" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
<Button size="sm" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
<Button size="sm" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
<Button size="sm" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
<Button size="sm" className="btn-vk btn-brand text"><span>VK</span></Button>
<Button size="sm" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
<Button size="sm" className="btn-behance btn-brand text"><span>Behance</span></Button>
<Button size="sm" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
<Button size="sm" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
<Button size="sm" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
<Button size="sm" className="btn-vine btn-brand text"><span>Vine</span></Button>
<Button size="sm" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
<Button size="sm" className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook btn-brand text"><span>Facebook</span></Button>
<Button className="btn-twitter btn-brand text"><span>Twitter</span></Button>
<Button className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
<Button className="btn-flickr btn-brand text"><span>Flickr</span></Button>
<Button className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
<Button className="btn-xing btn-brand text"><span>Xing</span></Button>
<Button className="btn-github btn-brand text"><span>Github</span></Button>
<Button className="btn-html5 btn-brand text"><span>HTML5</span></Button>
<Button className="btn-openid btn-brand text"><span>OpenID</span></Button>
<Button className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
<Button className="btn-css3 btn-brand text"><span>CSS3</span></Button>
<Button className="btn-youtube btn-brand text"><span>YouTube</span></Button>
<Button className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
<Button className="btn-google-plus btn-brand text"><span>Google+</span></Button>
<Button className="btn-instagram btn-brand text"><span>Instagram</span></Button>
<Button className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
<Button className="btn-vk btn-brand text"><span>VK</span></Button>
<Button className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
<Button className="btn-behance btn-brand text"><span>Behance</span></Button>
<Button className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
<Button className="btn-reddit btn-brand text"><span>Reddit</span></Button>
<Button className="btn-spotify btn-brand text"><span>Spotify</span></Button>
<Button className="btn-vine btn-brand text"><span>Vine</span></Button>
<Button className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
<Button className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
</p>
<h6>Size Large
<small> Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
<Button size="lg" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
<Button size="lg" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
<Button size="lg" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
<Button size="lg" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
<Button size="lg" className="btn-xing btn-brand text"><span>Xing</span></Button>
<Button size="lg" className="btn-github btn-brand text"><span>Github</span></Button>
<Button size="lg" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
<Button size="lg" className="btn-openid btn-brand text"><span>OpenID</span></Button>
<Button size="lg" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
<Button size="lg" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
<Button size="lg" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
<Button size="lg" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
<Button size="lg" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
<Button size="lg" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
<Button size="lg" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
<Button size="lg" className="btn-vk btn-brand text"><span>VK</span></Button>
<Button size="lg" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
<Button size="lg" className="btn-behance btn-brand text"><span>Behance</span></Button>
<Button size="lg" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
<Button size="lg" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
<Button size="lg" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
<Button size="lg" className="btn-vine btn-brand text"><span>Vine</span></Button>
<Button size="lg" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
</p>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
}
export default BrandButtons;

4
src/views/Buttons/SocialButtons/SocialButtons.test.js → src/views/Buttons/BrandButtons/BrandButtons.test.js
View File

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

2
src/views/Buttons/SocialButtons/package.json → src/views/Buttons/BrandButtons/package.json
View File

@ -2,5 +2,5 @@
"name": "SocialButtons", "name": "SocialButtons",
"version": "0.0.0", "version": "0.0.0",
"private": true, "private": true,
"main": "./SocialButtons.js" "main": "./BrandButtons.js"
} }

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

@ -8,7 +8,7 @@ class ButtonDropdowns extends Component {
this.toggle = this.toggle.bind(this); this.toggle = this.toggle.bind(this);
this.state = { this.state = {
dropdownOpen: new Array(16).fill(false), dropdownOpen: new Array(19).fill(false),
}; };
} }
@ -200,6 +200,57 @@ class ButtonDropdowns extends Component {
</ButtonDropdown> </ButtonDropdown>
</CardBody> </CardBody>
</Card> </Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Dropdown directions</strong>
</CardHeader>
<CardBody>
<ButtonDropdown direction="up" className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
<DropdownToggle caret size="lg">
Direction Up
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="left" className="mr-1" isOpen={this.state.dropdownOpen[16]} toggle={() => { this.toggle(16); }}>
<DropdownToggle caret size="lg">
Direction Left
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown direction="right" className="mr-1" isOpen={this.state.dropdownOpen[17]} toggle={() => { this.toggle(17); }}>
<DropdownToggle caret size="lg">
Direction Right
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
<ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[18]} toggle={() => { this.toggle(18); }}>
<DropdownToggle caret size="lg">
Default Down
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
<Card> <Card>
<CardHeader> <CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropdown sizing</strong> <i className="fa fa-align-justify"></i><strong>Button Dropdown sizing</strong>
@ -229,24 +280,6 @@ class ButtonDropdowns extends Component {
</ButtonDropdown> </ButtonDropdown>
</CardBody> </CardBody>
</Card> </Card>
<Card>
<CardHeader>
<i className="fa fa-align-justify"></i><strong>Button Dropup variation</strong>
</CardHeader>
<CardBody>
<ButtonDropdown dropup className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
<DropdownToggle caret size="lg">
Dropup
</DropdownToggle>
<DropdownMenu>
<DropdownItem header>Header</DropdownItem>
<DropdownItem disabled>Action Disabled</DropdownItem>
<DropdownItem>Action</DropdownItem>
<DropdownItem>Another Action</DropdownItem>
</DropdownMenu>
</ButtonDropdown>
</CardBody>
</Card>
</Col> </Col>
</Row> </Row>
</div> </div>

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

@ -12,9 +12,9 @@ class Buttons extends Component {
<strong>Options</strong> <strong>Options</strong>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Button color="primary">Primary</Button>{' '} <Button color="primary" className="mr-1">Primary</Button>
<Button color="secondary">Secondary</Button>{' '} <Button color="secondary" className="mr-1">Secondary</Button>
<Button color="success">Success</Button>{' '} <Button color="success" className="mr-1">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>{' '}
@ -25,12 +25,12 @@ class Buttons extends Component {
<strong>With Icons</strong> <strong>With Icons</strong>
</CardHeader> </CardHeader>
<CardBody> <CardBody>
<Button color="primary"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button> <Button color="primary" className="mr-1"><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" className="mr-1"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
<Button color="success"><i className="fa fa-magic"></i>&nbsp; Success</Button> <Button color="success" className="mr-1"><i className="fa fa-magic"></i>&nbsp; Success</Button>
<Button color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button> <Button color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>{' '}
<Button color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button> <Button color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>{' '}
<Button color="link"><i className="fa fa-link"></i>&nbsp; Link</Button> <Button color="link"><i className="fa fa-link"></i>&nbsp; Link</Button>{' '}
</CardBody> </CardBody>
</Card> </Card>
<Card> <Card>

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

@ -1,318 +0,0 @@
import React, { Component } from 'react';
import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
class SocialButtons extends Component {
render() {
return (
<div className="animated fadeIn">
<Row>
<Col xs="12">
<Card>
<CardHeader>
<strong>Social Media Button</strong>
<small>Usage ex.</small>
<code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small>Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook"><span>Facebook</span></Button>
<Button size="sm" className="btn-twitter"><span>Twitter</span></Button>
<Button size="sm" className="btn-linkedin"><span>LinkedIn</span></Button>
<Button size="sm" className="btn-flickr"><span>Flickr</span></Button>
<Button size="sm" className="btn-tumblr"><span>Tumblr</span></Button>
<Button size="sm" className="btn-xing"><span>Xing</span></Button>
<Button size="sm" className="btn-github"><span>Github</span></Button>
<Button size="sm" className="btn-html5"><span>HTML5</span></Button>
<Button size="sm" className="btn-openid"><span>OpenID</span></Button>
<Button size="sm" className="btn-stack-overflow"><span>StackOverflow</span></Button>
<Button size="sm" className="btn-css3"><span>CSS3</span></Button>
<Button size="sm" className="btn-youtube"><span>YouTube</span></Button>
<Button size="sm" className="btn-dribbble"><span>Dribbble</span></Button>
<Button size="sm" className="btn-google-plus"><span>Google+</span></Button>
<Button size="sm" className="btn-instagram"><span>Instagram</span></Button>
<Button size="sm" className="btn-pinterest"><span>Pinterest</span></Button>
<Button size="sm" className="btn-vk"><span>VK</span></Button>
<Button size="sm" className="btn-yahoo"><span>Yahoo</span></Button>
<Button size="sm" className="btn-behance"><span>Behance</span></Button>
<Button size="sm" className="btn-dropbox"><span>Dropbox</span></Button>
<Button size="sm" className="btn-reddit"><span>Reddit</span></Button>
<Button size="sm" className="btn-spotify"><span>Spotify</span></Button>
<Button size="sm" className="btn-vine"><span>Vine</span></Button>
<Button size="sm" className="btn-foursquare"><span>Forsquare</span></Button>
<Button size="sm" className="btn-vimeo"><span>Vimeo</span></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook"><span>Facebook</span></Button>
<Button className="btn-twitter"><span>Twitter</span></Button>
<Button className="btn-linkedin"><span>LinkedIn</span></Button>
<Button className="btn-flickr"><span>Flickr</span></Button>
<Button className="btn-tumblr"><span>Tumblr</span></Button>
<Button className="btn-xing"><span>Xing</span></Button>
<Button className="btn-github"><span>Github</span></Button>
<Button className="btn-html5"><span>HTML5</span></Button>
<Button className="btn-openid"><span>OpenID</span></Button>
<Button className="btn-stack-overflow"><span>StackOverflow</span></Button>
<Button className="btn-css3"><span>CSS3</span></Button>
<Button className="btn-youtube"><span>YouTube</span></Button>
<Button className="btn-dribbble"><span>Dribbble</span></Button>
<Button className="btn-google-plus"><span>Google+</span></Button>
<Button className="btn-instagram"><span>Instagram</span></Button>
<Button className="btn-pinterest"><span>Pinterest</span></Button>
<Button className="btn-vk"><span>VK</span></Button>
<Button className="btn-yahoo"><span>Yahoo</span></Button>
<Button className="btn-behance"><span>Behance</span></Button>
<Button className="btn-dropbox"><span>Dropbox</span></Button>
<Button className="btn-reddit"><span>Reddit</span></Button>
<Button className="btn-spotify"><span>Spotify</span></Button>
<Button className="btn-vine"><span>Vine</span></Button>
<Button className="btn-foursquare"><span>Forsquare</span></Button>
<Button className="btn-vimeo"><span>Vimeo</span></Button>
</p>
<h6>Size Large
<small>Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook"><span>Facebook</span></Button>
<Button size="lg" className="btn-twitter"><span>Twitter</span></Button>
<Button size="lg" className="btn-linkedin"><span>LinkedIn</span></Button>
<Button size="lg" className="btn-flickr"><span>Flickr</span></Button>
<Button size="lg" className="btn-tumblr"><span>Tumblr</span></Button>
<Button size="lg" className="btn-xing"><span>Xing</span></Button>
<Button size="lg" className="btn-github"><span>Github</span></Button>
<Button size="lg" className="btn-html5"><span>HTML5</span></Button>
<Button size="lg" className="btn-openid"><span>OpenID</span></Button>
<Button size="lg" className="btn-stack-overflow"><span>StackOverflow</span></Button>
<Button size="lg" className="btn-css3"><span>CSS3</span></Button>
<Button size="lg" className="btn-youtube"><span>YouTube</span></Button>
<Button size="lg" className="btn-dribbble"><span>Dribbble</span></Button>
<Button size="lg" className="btn-google-plus"><span>Google+</span></Button>
<Button size="lg" className="btn-instagram"><span>Instagram</span></Button>
<Button size="lg" className="btn-pinterest"><span>Pinterest</span></Button>
<Button size="lg" className="btn-vk"><span>VK</span></Button>
<Button size="lg" className="btn-yahoo"><span>Yahoo</span></Button>
<Button size="lg" className="btn-behance"><span>Behance</span></Button>
<Button size="lg" className="btn-dropbox"><span>Dropbox</span></Button>
<Button size="lg" className="btn-reddit"><span>Reddit</span></Button>
<Button size="lg" className="btn-spotify"><span>Spotify</span></Button>
<Button size="lg" className="btn-vine"><span>Vine</span></Button>
<Button size="lg" className="btn-foursquare"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo"><span>Vimeo</span></Button>
</p>
</CardBody>
</Card>
</Col>
<Col xs="12">
<Card>
<CardHeader>
<strong>Social Media Button</strong>
<small>Only icons. Usage ex.</small>
<code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small>Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook icon"><span>Facebook</span></Button>
<Button size="sm" className="btn-twitter icon"><span>Twitter</span></Button>
<Button size="sm" className="btn-linkedin icon"><span>LinkedIn</span></Button>
<Button size="sm" className="btn-flickr icon"><span>Flickr</span></Button>
<Button size="sm" className="btn-tumblr icon"><span>Tumblr</span></Button>
<Button size="sm" className="btn-xing icon"><span>Xing</span></Button>
<Button size="sm" className="btn-github icon"><span>Github</span></Button>
<Button size="sm" className="btn-html5 icon"><span>HTML5</span></Button>
<Button size="sm" className="btn-openid icon"><span>OpenID</span></Button>
<Button size="sm" className="btn-stack-overflow icon"><span>StackOverflow</span></Button>
<Button size="sm" className="btn-css3 icon"><span>CSS3</span></Button>
<Button size="sm" className="btn-youtube icon"><span>YouTube</span></Button>
<Button size="sm" className="btn-dribbble icon"><span>Dribbble</span></Button>
<Button size="sm" className="btn-google-plus icon"><span>Google+</span></Button>
<Button size="sm" className="btn-instagram icon"><span>Instagram</span></Button>
<Button size="sm" className="btn-pinterest icon"><span>Pinterest</span></Button>
<Button size="sm" className="btn-vk icon"><span>VK</span></Button>
<Button size="sm" className="btn-yahoo icon"><span>Yahoo</span></Button>
<Button size="sm" className="btn-behance icon"><span>Behance</span></Button>
<Button size="sm" className="btn-dropbox icon"><span>Dropbox</span></Button>
<Button size="sm" className="btn-reddit icon"><span>Reddit</span></Button>
<Button size="sm" className="btn-spotify icon"><span>Spotify</span></Button>
<Button size="sm" className="btn-vine icon"><span>Vine</span></Button>
<Button size="sm" className="btn-foursquare icon"><span>Forsquare</span></Button>
<Button size="sm" className="btn-vimeo icon"><span>Vimeo</span></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook icon"><span>Facebook</span></Button>
<Button className="btn-twitter icon"><span>Twitter</span></Button>
<Button className="btn-linkedin icon"><span>LinkedIn</span></Button>
<Button className="btn-flickr icon"><span>Flickr</span></Button>
<Button className="btn-tumblr icon"><span>Tumblr</span></Button>
<Button className="btn-xing icon"><span>Xing</span></Button>
<Button className="btn-github icon"><span>Github</span></Button>
<Button className="btn-html5 icon"><span>HTML5</span></Button>
<Button className="btn-openid icon"><span>OpenID</span></Button>
<Button className="btn-stack-overflow icon"><span>StackOverflow</span></Button>
<Button className="btn-css3 icon"><span>CSS3</span></Button>
<Button className="btn-youtube icon"><span>YouTube</span></Button>
<Button className="btn-dribbble icon"><span>Dribbble</span></Button>
<Button className="btn-google-plus icon"><span>Google+</span></Button>
<Button className="btn-instagram icon"><span>Instagram</span></Button>
<Button className="btn-pinterest icon"><span>Pinterest</span></Button>
<Button className="btn-vk icon"><span>VK</span></Button>
<Button className="btn-yahoo icon"><span>Yahoo</span></Button>
<Button className="btn-behance icon"><span>Behance</span></Button>
<Button className="btn-dropbox icon"><span>Dropbox</span></Button>
<Button className="btn-reddit icon"><span>Reddit</span></Button>
<Button className="btn-spotify icon"><span>Spotify</span></Button>
<Button className="btn-vine icon"><span>Vine</span></Button>
<Button className="btn-foursquare icon"><span>Forsquare</span></Button>
<Button className="btn-vimeo icon"><span>Vimeo</span></Button>
</p>
<h6>Size Large
<small>Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook icon"><span>Facebook</span></Button>
<Button size="lg" className="btn-twitter icon"><span>Twitter</span></Button>
<Button size="lg" className="btn-linkedin icon"><span>LinkedIn</span></Button>
<Button size="lg" className="btn-flickr icon"><span>Flickr</span></Button>
<Button size="lg" className="btn-tumblr icon"><span>Tumblr</span></Button>
<Button size="lg" className="btn-xing icon"><span>Xing</span></Button>
<Button size="lg" className="btn-github icon"><span>Github</span></Button>
<Button size="lg" className="btn-html5 icon"><span>HTML5</span></Button>
<Button size="lg" className="btn-openid icon"><span>OpenID</span></Button>
<Button size="lg" className="btn-stack-overflow icon"><span>StackOverflow</span></Button>
<Button size="lg" className="btn-css3 icon"><span>CSS3</span></Button>
<Button size="lg" className="btn-youtube icon"><span>YouTube</span></Button>
<Button size="lg" className="btn-dribbble icon"><span>Dribbble</span></Button>
<Button size="lg" className="btn-google-plus icon"><span>Google+</span></Button>
<Button size="lg" className="btn-instagram icon"><span>Instagram</span></Button>
<Button size="lg" className="btn-pinterest icon"><span>Pinterest</span></Button>
<Button size="lg" className="btn-vk icon"><span>VK</span></Button>
<Button size="lg" className="btn-yahoo icon"><span>Yahoo</span></Button>
<Button size="lg" className="btn-behance icon"><span>Behance</span></Button>
<Button size="lg" className="btn-dropbox icon"><span>Dropbox</span></Button>
<Button size="lg" className="btn-reddit icon"><span>Reddit</span></Button>
<Button size="lg" className="btn-spotify icon"><span>Spotify</span></Button>
<Button size="lg" className="btn-vine icon"><span>Vine</span></Button>
<Button size="lg" className="btn-foursquare icon"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo icon"><span>Vimeo</span></Button>
</p>
</CardBody>
</Card>
</Col>
<Col xs="12">
<Card>
<CardHeader>
<strong>Social Media Button</strong>
<small>Only text. Usage ex.</small>
<code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook text"&gt;&lt;span&gt;
Facebook&lt;/span&gt;&lt;/Button&gt;</code>
</CardHeader>
<CardBody>
<h6>Size Small
<small>Add this class <code>.btn-sm</code></small>
</h6>
<p>
<Button size="sm" className="btn-facebook text"><span>Facebook</span></Button>
<Button size="sm" className="btn-twitter text"><span>Twitter</span></Button>
<Button size="sm" className="btn-linkedin text"><span>LinkedIn</span></Button>
<Button size="sm" className="btn-flickr text"><span>Flickr</span></Button>
<Button size="sm" className="btn-tumblr text"><span>Tumblr</span></Button>
<Button size="sm" className="btn-xing text"><span>Xing</span></Button>
<Button size="sm" className="btn-github text"><span>Github</span></Button>
<Button size="sm" className="btn-html5 text"><span>HTML5</span></Button>
<Button size="sm" className="btn-openid text"><span>OpenID</span></Button>
<Button size="sm" className="btn-stack-overflow text"><span>StackOverflow</span></Button>
<Button size="sm" className="btn-css3 text"><span>CSS3</span></Button>
<Button size="sm" className="btn-youtube text"><span>YouTube</span></Button>
<Button size="sm" className="btn-dribbble text"><span>Dribbble</span></Button>
<Button size="sm" className="btn-google-plus text"><span>Google+</span></Button>
<Button size="sm" className="btn-instagram text"><span>Instagram</span></Button>
<Button size="sm" className="btn-pinterest text"><span>Pinterest</span></Button>
<Button size="sm" className="btn-vk text"><span>VK</span></Button>
<Button size="sm" className="btn-yahoo text"><span>Yahoo</span></Button>
<Button size="sm" className="btn-behance text"><span>Behance</span></Button>
<Button size="sm" className="btn-dropbox text"><span>Dropbox</span></Button>
<Button size="sm" className="btn-reddit text"><span>Reddit</span></Button>
<Button size="sm" className="btn-spotify text"><span>Spotify</span></Button>
<Button size="sm" className="btn-vine text"><span>Vine</span></Button>
<Button size="sm" className="btn-foursquare text"><span>Forsquare</span></Button>
<Button size="sm" className="btn-vimeo text"><span>Vimeo</span></Button>
</p>
<h6>Size Normal</h6>
<p>
<Button className="btn-facebook text"><span>Facebook</span></Button>
<Button className="btn-twitter text"><span>Twitter</span></Button>
<Button className="btn-linkedin text"><span>LinkedIn</span></Button>
<Button className="btn-flickr text"><span>Flickr</span></Button>
<Button className="btn-tumblr text"><span>Tumblr</span></Button>
<Button className="btn-xing text"><span>Xing</span></Button>
<Button className="btn-github text"><span>Github</span></Button>
<Button className="btn-html5 text"><span>HTML5</span></Button>
<Button className="btn-openid text"><span>OpenID</span></Button>
<Button className="btn-stack-overflow text"><span>StackOverflow</span></Button>
<Button className="btn-css3 text"><span>CSS3</span></Button>
<Button className="btn-youtube text"><span>YouTube</span></Button>
<Button className="btn-dribbble text"><span>Dribbble</span></Button>
<Button className="btn-google-plus text"><span>Google+</span></Button>
<Button className="btn-instagram text"><span>Instagram</span></Button>
<Button className="btn-pinterest text"><span>Pinterest</span></Button>
<Button className="btn-vk text"><span>VK</span></Button>
<Button className="btn-yahoo text"><span>Yahoo</span></Button>
<Button className="btn-behance text"><span>Behance</span></Button>
<Button className="btn-dropbox text"><span>Dropbox</span></Button>
<Button className="btn-reddit text"><span>Reddit</span></Button>
<Button className="btn-spotify text"><span>Spotify</span></Button>
<Button className="btn-vine text"><span>Vine</span></Button>
<Button className="btn-foursquare text"><span>Forsquare</span></Button>
<Button className="btn-vimeo text"><span>Vimeo</span></Button>
</p>
<h6>Size Large
<small>Add this class <code>.btn-lg</code></small>
</h6>
<p>
<Button size="lg" className="btn-facebook text"><span>Facebook</span></Button>
<Button size="lg" className="btn-twitter text"><span>Twitter</span></Button>
<Button size="lg" className="btn-linkedin text"><span>LinkedIn</span></Button>
<Button size="lg" className="btn-flickr text"><span>Flickr</span></Button>
<Button size="lg" className="btn-tumblr text"><span>Tumblr</span></Button>
<Button size="lg" className="btn-xing text"><span>Xing</span></Button>
<Button size="lg" className="btn-github text"><span>Github</span></Button>
<Button size="lg" className="btn-html5 text"><span>HTML5</span></Button>
<Button size="lg" className="btn-openid text"><span>OpenID</span></Button>
<Button size="lg" className="btn-stack-overflow text"><span>StackOverflow</span></Button>
<Button size="lg" className="btn-css3 text"><span>CSS3</span></Button>
<Button size="lg" className="btn-youtube text"><span>YouTube</span></Button>
<Button size="lg" className="btn-dribbble text"><span>Dribbble</span></Button>
<Button size="lg" className="btn-google-plus text"><span>Google+</span></Button>
<Button size="lg" className="btn-instagram text"><span>Instagram</span></Button>
<Button size="lg" className="btn-pinterest text"><span>Pinterest</span></Button>
<Button size="lg" className="btn-vk text"><span>VK</span></Button>
<Button size="lg" className="btn-yahoo text"><span>Yahoo</span></Button>
<Button size="lg" className="btn-behance text"><span>Behance</span></Button>
<Button size="lg" className="btn-dropbox text"><span>Dropbox</span></Button>
<Button size="lg" className="btn-reddit text"><span>Reddit</span></Button>
<Button size="lg" className="btn-spotify text"><span>Spotify</span></Button>
<Button size="lg" className="btn-vine text"><span>Vine</span></Button>
<Button size="lg" className="btn-foursquare text"><span>Forsquare</span></Button>
<Button size="lg" className="btn-vimeo text"><span>Vimeo</span></Button>
</p>
</CardBody>
</Card>
</Col>
</Row>
</div>
);
}
}
export default SocialButtons;

4
src/views/Buttons/index.js
View File

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

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

@ -790,10 +790,13 @@ class Dashboard extends Component {
</div> </div>
</div> </div>
<div className="legend text-center"> <div className="legend text-center">
<Badge pill color="info" style={{display: "inline-block"}}></Badge> <small>
<small>New clients</small> <sup className="px-1"><Badge pill color="info">&nbsp;</Badge></sup>
&nbsp; <Badge pill color="danger" style={{display: "inline-block"}}></Badge> New clients
<small>Recurring clients</small> &nbsp;
<sup className="px-1"><Badge pill color="danger">&nbsp;</Badge></sup>
Recurring clients
</small>
</div> </div>
</Col> </Col>
<Col xs="12" md="6" xl="6"> <Col xs="12" md="6" xl="6">

4
src/views/index.js
View File

@ -18,7 +18,7 @@ import {
Tooltips, Tooltips,
} from './Base'; } from './Base';
import { ButtonDropdowns, ButtonGroups, Buttons, SocialButtons } from './Buttons'; import { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons } from './Buttons';
import Charts from './Charts'; import Charts from './Charts';
import Dashboard from './Dashboard'; import Dashboard from './Dashboard';
import { Flags, FontAwesome, SimpleLineIcons } from './Icons'; import { Flags, FontAwesome, SimpleLineIcons } from './Icons';
@ -42,7 +42,7 @@ export {
FontAwesome, FontAwesome,
ButtonDropdowns, ButtonDropdowns,
ButtonGroups, ButtonGroups,
SocialButtons, BrandButtons,
Buttons, Buttons,
Tooltips, Tooltips,
Tabs, Tabs,