xidedix
GitHub
commit
cb73aa6655
21
.gitignore
vendored
21
.gitignore
vendored
@ -1,18 +1,23 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
# See https://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
/node_modules
|
||||
package-lock.json
|
||||
|
||||
# testing
|
||||
coverage
|
||||
/coverage
|
||||
|
||||
# production
|
||||
build
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.env
|
||||
.idea
|
||||
npm-debug.log
|
||||
compilation-stats.json
|
||||
.env.local
|
||||
.env.development.local
|
||||
.env.test.local
|
||||
.env.production.local
|
||||
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
|
||||
34
CHANGELOG.md
34
CHANGELOG.md
@ -1,4 +1,36 @@
|
||||
## [react](./REACT.md) version `changelog`
|
||||
## [CoreUI](https://coreui.io/) for [react](./REACT.md) changelog
|
||||
|
||||
##### `v2.0.0-alpha.3`
|
||||
- refactor(Colors): view layout, minor temp tweaks
|
||||
- refactor(FullAside): - ListGroup (deprecate callout)
|
||||
- refactor(Full*): containers minor fixes
|
||||
- refactor(Dropdowns): minor fixes
|
||||
- refactor(Forms): `card-header-actions`
|
||||
- feat(Forms): `<Input type="date">`
|
||||
- feat(Forms): `FormFeedback`
|
||||
- feat(Collapses): Accordion, Custom Accordion
|
||||
- feat(ListGroup): with TabPanes
|
||||
- refactor(PaginationItem): `tag="button"`
|
||||
- refactor(BrandButtons): spacing
|
||||
- refactor:(Buttons): view layout
|
||||
|
||||
##### `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`
|
||||
- refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
|
||||
- refactor: project structure change
|
||||
- refactor: moved to [Create-React-App](CRA.md)
|
||||
- chore: moved to [Semantic Versioning](https://semver.org/)
|
||||
|
||||
##### `v1.0.10`
|
||||
- refactor: `<InputGroupAddon addonType="prepend">`
|
||||
|
||||
39
REACT.md
39
REACT.md
@ -1,29 +1,40 @@
|
||||
# React version
|
||||
# CoreUI React version
|
||||
|
||||
## Intro
|
||||
It uses Sass (with .scss). The style is loaded at the component level.
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
|
||||
|
||||
Dependencies can be handled by **npm**.
|
||||
It uses Sass (with .scss). The styles are loaded at the template level with n`ode-sass-chokidar` css preprocessor
|
||||
|
||||
Dependencies are handled by **npm**.
|
||||
|
||||
## Directories
|
||||
```
|
||||
React_Full_Project/
|
||||
├── src/ (js|jsx source)
|
||||
├── scss/ (scss source)
|
||||
├── public/ (html template)
|
||||
├── img/ (images)
|
||||
CoreUI-React#v2.0.0
|
||||
├── public/ (static files)
|
||||
│ ├── assets/ (assets)
|
||||
│ └── index.html (html temlpate)
|
||||
│
|
||||
├── src/ (project root)
|
||||
│ ├── containers/ (container source)
|
||||
│ ├── scss/ (scss/css source)
|
||||
│ ├── views/ (views source)
|
||||
│ ├── App.js
|
||||
│ ├── App.test.js
|
||||
│ ├── index.js
|
||||
│ ├── _nav.js (sidebar config)
|
||||
│ └── routes.js (routes config)
|
||||
│
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## Usage
|
||||
**npm i** - to install dependencies
|
||||
`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
|
||||
`npm start` for developing (it runs webpack-dev-server)
|
||||
`npm run build` to run a dev build
|
||||
|
||||
## See also
|
||||
|
||||
[Create-React-App](CRA.md)
|
||||
[Changelog](./CHANGELOG.md)
|
||||
[Readme](./README.md)
|
||||
170
README.md
170
README.md
@ -1,70 +1,156 @@
|
||||
# CoreUI React - Free Bootstrap Admin Template [](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20React%20Admin%20Template%20&url=http://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
|
||||
# CoreUI Free React Admin Template v2 [](https://twitter.com/intent/tweet?text=CoreUI%20-%20Free%20React%20Admin%20Template%20&url=https://coreui.io/react/&hashtags=bootstrap,admin,template,dashboard,panel,free,angular,react,vue)
|
||||
|
||||
### Check out our React Admin Templates and support CoreUI Development
|
||||
Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) and [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
|
||||
|
||||
[](https://genesisui.com/admin-templates/reactjs/prime/?support=1)
|
||||
Curious why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Bootstrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
|
||||
|
||||
[Check out React Admin Templates Bundle](https://genesisui.com/admin-templates/reactjs/prime/?support=1)
|
||||
CoreUI is an Open Source Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.
|
||||
|
||||
This is React.js version of our Bootstrap 4 admin template [CoreUI](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
|
||||
|
||||
Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-source-bootstrap-4-admin-template-with-angular-2-react-js-vue-js-support) & [Designer News](https://www.designernews.co/stories/81127). Thanks in advance!
|
||||
|
||||
Why I decided to create CoreUI? Please read this article: [Jack of all trades, master of none. Why Boostrap Admin Templates suck.](https://medium.com/@lukaszholeczek/jack-of-all-trades-master-of-none-5ea53ef8a1f#.7eqx1bcd8)
|
||||
|
||||
CoreUI is an Open Source React & Bootstrap Admin Template. But CoreUI is not just another Admin Template. It goes way beyond hitherto admin templates thanks to transparent code and file structure. And if that's not enough, let’s just add that CoreUI consists bunch of unique features and over 1000 high quality icons.
|
||||
|
||||
CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [HTML5 Static](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [AngularJS](https://github.com/mrholek/CoreUI-AngularJS), [Angular 2+](https://github.com/mrholek/CoreUI-Angular), [React.js](https://github.com/mrholek/CoreUI-React) & [Vue.js](https://github.com/mrholek/CoreUI-Vue).
|
||||
CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/coreui/free-bootstrap-admin-template-ajax), [HTML5](https://github.com/coreui/free-angular-admin-template), [Angular 2+](https://github.com/coreui/free-angular-admin-template), [React.js](https://github.com/coreui/free-react-admin-template) & [Vue.js](https://github.com/coreui/free-vue-admin-template), [.NET Core 2](https://github.com/coreui/free-dotnet-admin-template).
|
||||
|
||||
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means mobile devices also, where the navigation is just as easy and intuitive as on a desktop or laptop. The CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
|
||||
|
||||
[](http://coreui.io)
|
||||
## Table of Contents
|
||||
|
||||
**NOTE:** Please remember to **STAR** this project and **FOLLOW** [my Github](https://github.com/mrholek) to keep you update with this template.
|
||||
* [Versions](#versions)
|
||||
* [CoreUI Pro](#coreui-pro)
|
||||
* [Installation](#installation)
|
||||
* [Create React App](#create-react-app)
|
||||
* [Usage](#basic-usage)
|
||||
* [What's included](#whats-included)
|
||||
* [Documentation](#documentation)
|
||||
* [Contributing](#contributing)
|
||||
* [Versioning](#versioning)
|
||||
* [Creators](#creators)
|
||||
* [Community](#community)
|
||||
* [Community Projects](#community-projects)
|
||||
* [License](#license)
|
||||
* [Support CoreUI Development](#support-coreui-development)
|
||||
|
||||
## Demo
|
||||
## Versions
|
||||
|
||||
A fully functional demo is available at [CoreUI](http://coreui.io/)
|
||||
* [CoreUI Free Bootstrap Admin Template (Ajax)](https://github.com/coreui/free-bootstrap-admin-template-ajax)
|
||||
* [CoreUI Free Angular 2+ Admin Template](https://github.com/coreui/free-angular-admin-template)
|
||||
* [CoreUI Free .NET Core 2 Admin Template](https://github.com/coreui/free-dotnet-admin-template)
|
||||
* [CoreUI Free React.js Admin Template](https://github.com/coreui/free-react-admin-template)
|
||||
* [CoreUI Free Vue.js Admin Template](https://github.com/coreui/free-vue-admin-template)
|
||||
|
||||
## CoreUI Pro
|
||||
|
||||
* 💪 [CoreUI Pro Bootstrap Admin Template](https://coreui.io/pro/)
|
||||
* 💪 [CoreUI Pro Bootstrap Admin Template (Ajax)](https://coreui.io/pro/)
|
||||
* 💪 [CoreUI Pro Angular Admin Template](https://coreui.io/pro/angular)
|
||||
* 💪 [CoreUI Pro React Admin Template](https://coreui.io/pro/react)
|
||||
* 💪 [CoreUI Pro Vue Admin Template](https://coreui.io/pro/vue)
|
||||
|
||||
## Installation
|
||||
|
||||
``` bash
|
||||
# clone the repo
|
||||
$ git clone https://github.com/mrholek/CoreUI-React.git my-project
|
||||
|
||||
# go into app's directory
|
||||
$ cd my-project
|
||||
|
||||
# install app's dependencies
|
||||
$ npm install
|
||||
```
|
||||
|
||||
## Create React App
|
||||
This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app)
|
||||
|
||||
see also:
|
||||
[User Guide](CRA.md)
|
||||
|
||||
### Basic usage
|
||||
|
||||
``` bash
|
||||
# dev server with hot reload at http://localhost:3000
|
||||
$ npm start
|
||||
```
|
||||
|
||||
Navigate to [http://localhost:3000](http://localhost:3000). The app will automatically reload if you change any of the source files.
|
||||
|
||||
### Build
|
||||
|
||||
Run `build` to build the project. The build artifacts will be stored in the `build/` directory.
|
||||
|
||||
```bash
|
||||
# build for production with minification
|
||||
$ npm run build
|
||||
```
|
||||
|
||||
## What's included
|
||||
|
||||
Within the download you'll find the following directories and files, You'll see something like this:
|
||||
Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations. You'll see something like this:
|
||||
|
||||
```
|
||||
CoreUI-React/
|
||||
├── React_Full_Project/
|
||||
├── React_Starter/
|
||||
|
||||
CoreUI-React#v2.0.0
|
||||
├── public/ #static files
|
||||
│ ├── assets/ #assets
|
||||
│ └── index.html #html temlpate
|
||||
│
|
||||
├── src/ #project root
|
||||
│ ├── containers/ #container source
|
||||
│ ├── scss/ #user scss/css source
|
||||
│ ├── views/ #views source
|
||||
│ ├── App.js
|
||||
│ ├── App.test.js
|
||||
│ ├── index.js
|
||||
│ ├── _nav.js #sidebar config
|
||||
│ └── routes.js #routes config
|
||||
│
|
||||
└── package.json
|
||||
```
|
||||
|
||||
## Other Versions
|
||||
|
||||
CoreUI includes 6 Version for Angular 4, AngularJS, React.js, Vue.js, Static HTML5 and AJAX HTML5.
|
||||
|
||||
* [Angular Version (Angular 2+)](https://github.com/mrholek/CoreUI-Angular).
|
||||
* [AngularJS Version](https://github.com/mrholek/CoreUI-AngularJS).
|
||||
* [HTML5 AJAX Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
|
||||
* [HTML5 Static Version](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template).
|
||||
* [React.js Version](https://github.com/mrholek/CoreUI-React).
|
||||
* [Vue.js Version](https://github.com/mrholek/CoreUI-Vue).
|
||||
* [ASP.NET Core 2 MVC Version](https://github.com/mrholek/CoreUI-NET)
|
||||
|
||||
## Bugs and feature requests
|
||||
|
||||
Have a bug or a feature request? [Please open a new issue](https://github.com/mrholek/CoreUI-React/issues/new).
|
||||
|
||||
## Documentation
|
||||
|
||||
CoreUI's documentation, is hosted on our website [CoreUI](http://coreui.io/)
|
||||
The documentation for the CoreUI Admin Template is hosted at our website [CoreUI for React](https://coreui.io/react/)
|
||||
|
||||
|
||||
## Contributing
|
||||
|
||||
Please read through our [contributing guidelines](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/v2.0.0/CONTRIBUTING.md). Included are directions for opening issues, coding standards, and notes on development.
|
||||
|
||||
Editor preferences are available in the [editor config](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template/blob/v2.0.0/.editorconfig) for easy use in common text editors. Read more and download plugins at <http://editorconfig.org>.
|
||||
|
||||
## Versioning
|
||||
|
||||
For transparency into our release cycle and in striving to maintain backward compatibility, CoreUI Free Admin Template is maintained under [the Semantic Versioning guidelines](http://semver.org/).
|
||||
|
||||
See [the Releases section of our project](https://github.com/mrholek/CoreUI-React/releases) for changelogs for each release version.
|
||||
|
||||
## Creators
|
||||
|
||||
**Łukasz Holeczek**
|
||||
* <https://twitter.com/lukaszholeczek>
|
||||
* <https://github.com/mrholek>
|
||||
|
||||
**Andrzej Kopański**
|
||||
* <https://github.com/xidedix>
|
||||
|
||||
## Community
|
||||
|
||||
Get updates on CoreUI's development and chat with the project maintainers and community members.
|
||||
|
||||
- Follow [@coreuikit on Twitter](https://twitter.com/coreuikit).
|
||||
- Read and subscribe to [CoreUI Blog](https://coreui.ui/blog/).
|
||||
|
||||
### Community Projects
|
||||
|
||||
Some of projects created by community but not maintained by CoreUI team.
|
||||
|
||||
* [NuxtJS + Vue CoreUI](https://github.com/muhibbudins/nuxt-coreui)
|
||||
* [Colmena](https://github.com/colmena/colmena)
|
||||
* [mvelosop/AspNetCore2CoreUI](https://github.com/mvelosop/AspNetCore2CoreUI)
|
||||
|
||||
## Copyright and license
|
||||
|
||||
copyright 2017 creativeLabs Łukasz Holeczek. Code released under [the MIT license](https://github.com/mrholek/CoreUI-React/blob/master/LICENSE).
|
||||
creativeLabs Łukasz Holeczek reserves the right to change the license of future releases. You can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI.
|
||||
copyright 2018 creativeLabs Łukasz Holeczek. Code released under [the MIT license](LICENSE).
|
||||
There is only one limitation you can't can’t re-distribute the CoreUI as stock. You can’t do this if you modify the CoreUI. In past we faced some problems with persons who tried to sell CoreUI based templates.
|
||||
|
||||
## Support CoreUI Development
|
||||
|
||||
CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on [PayPal](https://www.paypal.me/holeczek) or buying one of our [premium bootstrap 4 admin templates](https://genesisui.com/?support=1).
|
||||
CoreUI is an MIT licensed open source project and completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by donating on [PayPal](https://www.paypal.me/holeczek), buying [CoreUI Pro Version](https://coreui.io/pro) or buying one of our [premium admin templates](https://genesisui.com/?support=1).
|
||||
|
||||
As of now I am exploring the possibility of working on CoreUI fulltime - if you are a business that is building core products using CoreUI, I am also open to conversations regarding custom sponsorship / consulting arrangements. Get in touch on [Twitter](https://twitter.com/lukaszholeczek).
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
["react"], ["env"]
|
||||
],
|
||||
"plugins": ["transform-object-rest-spread"]
|
||||
}
|
||||
19
React_Full_Project/.gitignore
vendored
19
React_Full_Project/.gitignore
vendored
@ -1,19 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.env
|
||||
.idea
|
||||
npm-debug.log
|
||||
compilation-stats.json
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "@coreui/react",
|
||||
"version": "1.0.10",
|
||||
"description": "Open Source Bootstrap Admin Template",
|
||||
"author": "Łukasz Holeczek",
|
||||
"homepage": "http://coreui.io",
|
||||
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"babel-core": "6.26.0",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-plugin-transform-object-rest-spread": "6.26.0",
|
||||
"babel-preset-env": "1.6.1",
|
||||
"babel-preset-react": "6.24.1",
|
||||
"copy-webpack-plugin": "4.3.1",
|
||||
"css-hot-loader": "1.3.6",
|
||||
"css-loader": "0.28.9",
|
||||
"extract-text-webpack-plugin": "3.0.2",
|
||||
"file-loader": "1.1.6",
|
||||
"html-loader": "0.5.5",
|
||||
"html-webpack-plugin": "2.30.1",
|
||||
"node-sass": "4.7.2",
|
||||
"rimraf": "2.6.2",
|
||||
"sass-loader": "6.0.6",
|
||||
"source-list-map": "2.0.0",
|
||||
"style-loader": "0.20.1",
|
||||
"uglify-js": "3.3.9",
|
||||
"url-loader": "0.6.2",
|
||||
"webpack": "3.10.0",
|
||||
"webpack-dev-server": "2.11.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "4.0.0",
|
||||
"chart.js": "2.7.1",
|
||||
"flag-icon-css": "2.9.0",
|
||||
"font-awesome": "4.7.0",
|
||||
"history": "4.7.2",
|
||||
"react": "16.2.0",
|
||||
"react-chartjs-2": "2.7.0",
|
||||
"react-dom": "16.2.0",
|
||||
"react-router-dom": "4.2.2",
|
||||
"react-transition-group": "2.2.1",
|
||||
"reactstrap": "5.0.0-beta",
|
||||
"simple-line-icons": "2.4.1"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
|
||||
"start": "webpack-dev-server --progress --color --inline --env.dev",
|
||||
"build": "webpack -p --progress --env.prod",
|
||||
"clean": "rimraf ./build"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.4",
|
||||
"npm": ">= 5.6.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@ -1,130 +0,0 @@
|
||||
// Bootstrap overrides
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f0f3f5;
|
||||
$gray-200: #c2cfd6;
|
||||
$gray-300: #a4b7c1;
|
||||
$gray-400: #869fac;
|
||||
$gray-500: #678898;
|
||||
$gray-600: #536c79;
|
||||
$gray-700: #3e515b;
|
||||
$gray-800: #29363d;
|
||||
$gray-900: #151b1e;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #20a8d8;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #f86c6b;
|
||||
$orange: #f8cb00;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #4dbd74;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #63c2de;
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: $gray-600,
|
||||
gray-dark: $gray-800
|
||||
);
|
||||
|
||||
$theme-colors: (
|
||||
primary: $blue,
|
||||
secondary: $gray-300,
|
||||
success: $green,
|
||||
info: $cyan,
|
||||
warning: $yellow,
|
||||
danger: $red,
|
||||
light: $gray-100,
|
||||
dark: $gray-800,
|
||||
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
|
||||
gray-100: $gray-100,
|
||||
gray-200: $gray-200,
|
||||
gray-300: $gray-300,
|
||||
gray-400: $gray-400,
|
||||
gray-500: $gray-500,
|
||||
gray-600: $gray-600,
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900
|
||||
);
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-transitions: true;
|
||||
$enable-rounded: false;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: #e4e5e6;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-size-base: 0.875rem;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: #fff;
|
||||
$breadcrumb-margin-bottom: 1.5rem;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: $gray-200;
|
||||
$card-cap-bg: $gray-100;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-padding-y: 0;
|
||||
$dropdown-border-color: $gray-200;
|
||||
$dropdown-divider-bg: $gray-100;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-secondary-border: $gray-300;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-100;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-accent: $gray-100;
|
||||
$table-bg-hover: $gray-100;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-group-addon-bg: $gray-100;
|
||||
$input-border-color: $gray-200;
|
||||
$input-group-addon-border-color: $gray-200;
|
||||
@ -1 +0,0 @@
|
||||
// core overrides
|
||||
@ -1,27 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
.animated {
|
||||
animation-duration: 1s;
|
||||
// animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.animated.infinite {
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
|
||||
.animated.hinge {
|
||||
animation-duration: 2s;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadeIn {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
@ -1,64 +0,0 @@
|
||||
.aside-menu {
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $aside-menu-width;
|
||||
color: $aside-menu-color;
|
||||
background: $aside-menu-bg;
|
||||
@include borders($aside-menu-borders);
|
||||
|
||||
.nav-tabs {
|
||||
border-color: $border-color;
|
||||
.nav-link {
|
||||
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
|
||||
color: $body-color;
|
||||
border-top: 0;
|
||||
&.active {
|
||||
color: theme-color("primary");
|
||||
border-right-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
.nav-item:first-child {
|
||||
.nav-link {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 0;
|
||||
border-top: 1px solid $border-color;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-button { }
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($aside-menu-bg, 5%);
|
||||
border-right: 1px solid darken($aside-menu-bg, 5%);
|
||||
border-left: 1px solid darken($aside-menu-bg, 5%);
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-track-piece { }
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($aside-menu-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
|
||||
.tab-pane {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,51 +0,0 @@
|
||||
.img-avatar {
|
||||
border-radius: 50em;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
$width: 36px;
|
||||
$status-width: 10px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-xs {
|
||||
$width: 20px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-sm {
|
||||
$width: 24px;
|
||||
$status-width: 8px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatar.avatar-lg {
|
||||
$width: 72px;
|
||||
$status-width: 12px;
|
||||
@include avatar($width,$status-width);
|
||||
}
|
||||
|
||||
.avatars-stack {
|
||||
.avatar.avatar-xs {
|
||||
margin-right: -10px;
|
||||
}
|
||||
|
||||
// .avatar.avatar-sm {
|
||||
//
|
||||
// }
|
||||
|
||||
.avatar {
|
||||
margin-right: -15px;
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed;
|
||||
|
||||
&:hover {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
// .avatar.avatar-lg {
|
||||
//
|
||||
// }
|
||||
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
.badge-pill {
|
||||
border-radius: $badge-pill-border-radius;
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.breadcrumb-menu {
|
||||
margin-left: auto;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.btn-group {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 0 $input-btn-padding-x;
|
||||
color: $text-muted;
|
||||
vertical-align: top;
|
||||
border: 0;
|
||||
|
||||
&:hover, &.active {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.open {
|
||||
.btn {
|
||||
color: $body-color;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
min-width: 180px;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
@include borders($breadcrumb-borders);
|
||||
}
|
||||
@ -1,566 +0,0 @@
|
||||
button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn-transparent {
|
||||
color: #fff;
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn {
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
margin-top: -2px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-facebook,
|
||||
.btn-twitter,
|
||||
.btn-linkedin,
|
||||
.btn-flickr,
|
||||
.btn-tumblr,
|
||||
.btn-xing,
|
||||
.btn-github,
|
||||
.btn-html5,
|
||||
.btn-openid,
|
||||
.btn-stack-overflow,
|
||||
.btn-youtube,
|
||||
.btn-css3,
|
||||
.btn-dribbble,
|
||||
.btn-google-plus,
|
||||
.btn-instagram,
|
||||
.btn-pinterest,
|
||||
.btn-vk,
|
||||
.btn-yahoo,
|
||||
.btn-behance,
|
||||
.btn-dropbox,
|
||||
.btn-reddit,
|
||||
.btn-spotify,
|
||||
.btn-vine,
|
||||
.btn-foursquare,
|
||||
.btn-vimeo {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
color: #fff !important;
|
||||
text-align: center;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
font-family: "FontAwesome";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
&.icon {
|
||||
|
||||
span {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.text {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
}
|
||||
@include button-social-size($input-btn-padding-y, $input-btn-padding-x, $font-size-base, $line-height-base, $btn-border-radius);
|
||||
|
||||
&.btn-lg {
|
||||
@include button-social-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg);
|
||||
}
|
||||
|
||||
&.btn-sm {
|
||||
@include button-social-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.btn-facebook {
|
||||
$color: $facebook;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09a";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-twitter {
|
||||
$color: $twitter;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f099";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-linkedin {
|
||||
$color: $linkedin;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0e1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-flickr {
|
||||
$color: $flickr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-tumblr {
|
||||
$color: $tumblr;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f173";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-xing {
|
||||
$color: $xing;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f168";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-github {
|
||||
$color: $github;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f09b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-html5 {
|
||||
$color: $html5;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-openid {
|
||||
$color: $openid;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-stack-overflow {
|
||||
$color: $stack-overflow;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-css3 {
|
||||
$color: $css3;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f13c";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-youtube {
|
||||
$color: $youtube;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f167";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dribbble {
|
||||
$color: $dribbble;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f17d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-google-plus {
|
||||
$color: $google-plus;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d5";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-instagram {
|
||||
$color: $instagram;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16d";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-pinterest {
|
||||
$color: $pinterest;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f0d2";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vk {
|
||||
$color: $vk;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f189";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-yahoo {
|
||||
$color: $yahoo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f19e";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-behance {
|
||||
$color: $behance;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1b4";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-dropbox {
|
||||
$color: $dropbox;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f16b";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-reddit {
|
||||
$color: $reddit;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1a1";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-spotify {
|
||||
$color: $spotify;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1bc";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vine {
|
||||
$color: $vine;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f1ca";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-foursquare {
|
||||
$color: $foursquare;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f180";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-vimeo {
|
||||
$color: $vimeo;
|
||||
|
||||
background: $color;
|
||||
&::before {
|
||||
content: "\f194";
|
||||
background: darken($color, 5%);
|
||||
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: darken($color, 5%);
|
||||
|
||||
&::before {
|
||||
background: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
.callout {
|
||||
position: relative;
|
||||
padding: 0 $spacer;
|
||||
margin: $spacer 0;
|
||||
border: 0 solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
|
||||
@if $enable-rounded {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
float: right;
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-bordered {
|
||||
border: 1px solid $border-color;
|
||||
border-left-width: .25rem;
|
||||
}
|
||||
.callout code {
|
||||
border-radius: .25rem;
|
||||
}
|
||||
.callout h4 {
|
||||
margin-top: 0;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
.callout p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.callout + .callout {
|
||||
margin-top: - .25rem;
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-left-color: $text-muted;
|
||||
|
||||
h4 {
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
.callout-#{$color} {
|
||||
border-left-color: $value;
|
||||
|
||||
h4 {
|
||||
color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,193 +0,0 @@
|
||||
.card {
|
||||
margin-bottom: 1.5 * $spacer;
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: darken($value, 12.5%);
|
||||
.card-header {
|
||||
background-color: darken($value, 3%);
|
||||
border-color: darken($value, 12.5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text-white .text-muted {
|
||||
color: rgba(255,255,255,.6) !important;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
|
||||
.icon-bg {
|
||||
display: inline-block;
|
||||
padding: $card-spacer-y $card-spacer-x !important;
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-right: $card-spacer-x;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
margin-left: -$card-spacer-x;
|
||||
line-height: inherit;
|
||||
color: $card-icon-color;
|
||||
vertical-align: bottom;
|
||||
background: $card-icon-bg;
|
||||
border-right: $card-border-width solid $card-border-color;
|
||||
}
|
||||
|
||||
.nav.nav-tabs {
|
||||
margin-top: -$card-spacer-y;
|
||||
margin-bottom: -$card-spacer-y;
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-item {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding: $card-spacer-y $card-spacer-x / 2;
|
||||
color: $text-muted;
|
||||
border-top: 0;
|
||||
|
||||
&.active {
|
||||
color: $body-color;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.card-header-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin-top: - $input-btn-padding-y;
|
||||
}
|
||||
.btn-sm {
|
||||
margin-top: - $input-btn-padding-y-sm;
|
||||
}
|
||||
.btn-lg {
|
||||
margin-top: - $input-btn-padding-y-lg;
|
||||
}
|
||||
}
|
||||
//
|
||||
.card-footer {
|
||||
|
||||
ul {
|
||||
display: table;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
table-layout: fixed;
|
||||
|
||||
li {
|
||||
display: table-cell;
|
||||
padding: 0 $card-spacer-x;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[class*="card-outline-"] {
|
||||
.card-body {
|
||||
background: #fff !important;
|
||||
}
|
||||
|
||||
&.card-outline-top {
|
||||
border-top-width: 2px;
|
||||
border-right-color: $border-color;
|
||||
border-bottom-color: $border-color;
|
||||
border-left-color: $border-color;
|
||||
}
|
||||
}
|
||||
|
||||
// Cards with color accent
|
||||
@each $color, $value in $theme-colors {
|
||||
.card-accent-#{$color} {
|
||||
@include card-accent-variant($value);
|
||||
}
|
||||
}
|
||||
|
||||
// Card Actions
|
||||
.card-header {
|
||||
> i {
|
||||
margin-right: $spacer / 2;
|
||||
}
|
||||
.card-actions {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
//height: inherit;
|
||||
|
||||
a, button {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50px;
|
||||
padding: $card-spacer-y 0;
|
||||
margin: 0 !important;
|
||||
color: $body-color;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-left: 1px solid $border-color;
|
||||
box-shadow: 0;
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
transition: .4s;
|
||||
}
|
||||
|
||||
.r180 {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
.input-group {
|
||||
width: 230px;
|
||||
margin: 6px;
|
||||
|
||||
.input-group-prepend, .input-group-append {
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
input {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card-full {
|
||||
margin-top: - $spacer;
|
||||
margin-right: - $grid-gutter-width / 2;
|
||||
margin-left: - $grid-gutter-width / 2;
|
||||
border: 0;
|
||||
border-bottom: $card-border-width solid $border-color;
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
.card-columns {
|
||||
|
||||
&.cols-2 {
|
||||
column-count: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
&.drag, .drag {
|
||||
cursor: move;
|
||||
}
|
||||
}
|
||||
|
||||
.card-placeholder {
|
||||
background: rgba(0,0,0,.025);
|
||||
border: 1px dashed $gray-300;
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.chart-wrapper {
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
// scss-lint:disable QualifyingElement
|
||||
base-chart.chart {
|
||||
display: block !important;
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
// Temp fix for reactstrap
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu-right {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
// Links, buttons, and more within the dropdown menu
|
||||
.dropdown-item {
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
&:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin-right: 10px;
|
||||
margin-left: -10px;
|
||||
color: $dropdown-border-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
padding: 8px 20px;
|
||||
background: $dropdown-divider-bg;
|
||||
border-bottom: 1px solid $dropdown-border-color;
|
||||
|
||||
.btn {
|
||||
margin-top: -7px;
|
||||
color: $dropdown-header-color;
|
||||
|
||||
&:hover {
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
&.pull-right {
|
||||
margin-right: -20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu-lg {
|
||||
width: 250px;
|
||||
}
|
||||
.app-header {
|
||||
.navbar-nav {
|
||||
.dropdown-menu {
|
||||
position: absolute;
|
||||
}
|
||||
// Menu positioning
|
||||
//
|
||||
// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
|
||||
// menu with the parent.
|
||||
.dropdown-menu-right {
|
||||
right: 0;
|
||||
left: auto; // Reset the default from `.dropdown-menu`
|
||||
}
|
||||
|
||||
.dropdown-menu-left {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.app-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 0 $spacer;
|
||||
color: $footer-color;
|
||||
background: $footer-bg;
|
||||
@include borders($footer-borders);
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.row.row-equal {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
margin-right: ($grid-gutter-width / -2);
|
||||
margin-left: ($grid-gutter-width / -2);
|
||||
|
||||
[class*="col-"] {
|
||||
padding-right: ($grid-gutter-width / 4);
|
||||
padding-left: ($grid-gutter-width / 4);
|
||||
}
|
||||
}
|
||||
|
||||
.main .container-fluid {
|
||||
padding: 0 30px;
|
||||
}
|
||||
@ -1,5 +0,0 @@
|
||||
.input-group-prepend,
|
||||
.input-group-append {
|
||||
white-space: nowrap;
|
||||
vertical-align: middle; // Match the inputs
|
||||
}
|
||||
@ -1,387 +0,0 @@
|
||||
// IE10&11 Flexbox fix
|
||||
@media all and (-ms-high-contrast:none) {
|
||||
html {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need.
|
||||
.app,
|
||||
app-dashboard,
|
||||
app-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
flex: 0 0 $navbar-height;
|
||||
}
|
||||
|
||||
.app-footer {
|
||||
flex: 0 0 $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
// $sidebar-width is the width of the columns
|
||||
flex: 0 0 $sidebar-width;
|
||||
// put the nav on the left
|
||||
order: -1;
|
||||
}
|
||||
|
||||
.aside-menu {
|
||||
// $aside-menu-width is the width of the columns
|
||||
flex: 0 0 $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// header
|
||||
//
|
||||
.header-fixed {
|
||||
.app-header {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
}
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
// margin-top: - $navbar-height;
|
||||
|
||||
// .sidebar-nav {
|
||||
// height: calc(100vh - #{$navbar-height});
|
||||
// }
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-off-canvas {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-compact-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
width: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Breadcrumb
|
||||
//
|
||||
.breadcrumb-fixed {
|
||||
.main {
|
||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||
padding-top: $breadcrumb-height;
|
||||
}
|
||||
|
||||
.breadcrumb {
|
||||
position: fixed;
|
||||
top: $navbar-height;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky - 2;
|
||||
}
|
||||
|
||||
// if sidebar + main + aside
|
||||
.main:nth-child(2) {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
// if sidebar + main
|
||||
.main:first-child {
|
||||
.breadcrumb {
|
||||
right: $aside-menu-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// if main + aside
|
||||
.main:last-child {
|
||||
.breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-minimized {
|
||||
.main .breadcrumb {
|
||||
left: $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-hidden, &.sidebar-off-canvas {
|
||||
.main .breadcrumb {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.aside-menu-hidden, &.aside-menu-off-canvas {
|
||||
.main .breadcrumb {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Footer
|
||||
//
|
||||
.footer-fixed {
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-sticky;
|
||||
height: $footer-height;
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-bottom: $footer-height;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Animations
|
||||
//
|
||||
.app-header,
|
||||
.app-footer,
|
||||
.sidebar,
|
||||
.main,
|
||||
.aside-menu {
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
||||
}
|
||||
.sidebar-nav {
|
||||
transition: width $layout-transition-speed;
|
||||
}
|
||||
.breadcrumb {
|
||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||
}
|
||||
|
||||
//
|
||||
// Mobile layout
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
.app-header.navbar {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $navbar-brand-bg;
|
||||
@include borders($navbar-brand-border);
|
||||
|
||||
.navbar-toggler {
|
||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||
color: $navbar-color;
|
||||
} @else {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
margin-left: - ($navbar-brand-width / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.app-body {
|
||||
margin-top: $navbar-height;
|
||||
}
|
||||
|
||||
.breadcrumb-fixed {
|
||||
.main:nth-child(2) .breadcrumb {
|
||||
right: auto;
|
||||
left: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $mobile-sidebar-width;
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
|
||||
.sidebar-nav,
|
||||
.nav {
|
||||
width: $mobile-sidebar-width;
|
||||
min-height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
// .aside-menu {
|
||||
// margin-right: - $aside-menu-width;
|
||||
// }
|
||||
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-mobile-show {
|
||||
.sidebar {
|
||||
width: $mobile-sidebar-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.main {
|
||||
margin-right: - $mobile-sidebar-width !important;
|
||||
margin-left: $mobile-sidebar-width !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,128 +0,0 @@
|
||||
// Angular Version
|
||||
// Make clicks pass-through
|
||||
// scss-lint:disable all
|
||||
#loading-bar,
|
||||
#loading-bar-spinner {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
-moz-transition: 350ms linear all;
|
||||
-o-transition: 350ms linear all;
|
||||
-webkit-transition: 350ms linear all;
|
||||
transition: 350ms linear all;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter,
|
||||
#loading-bar.ng-leave.ng-leave-active,
|
||||
#loading-bar-spinner.ng-enter,
|
||||
#loading-bar-spinner.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
#loading-bar.ng-enter.ng-enter-active,
|
||||
#loading-bar.ng-leave,
|
||||
#loading-bar-spinner.ng-enter.ng-enter-active,
|
||||
#loading-bar-spinner.ng-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#loading-bar .bar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 20002;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
border-top-right-radius: 1px;
|
||||
border-bottom-right-radius: 1px;
|
||||
-moz-transition: width 350ms;
|
||||
-o-transition: width 350ms;
|
||||
-webkit-transition: width 350ms;
|
||||
transition: width 350ms;
|
||||
}
|
||||
|
||||
// Fancy blur effect
|
||||
#loading-bar .peg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 70px;
|
||||
height: 2px;
|
||||
-moz-border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
border-radius: 100%;
|
||||
-moz-box-shadow: #29d 1px 0 6px 1px;
|
||||
-ms-box-shadow: #29d 1px 0 6px 1px;
|
||||
-webkit-box-shadow: #29d 1px 0 6px 1px;
|
||||
box-shadow: #29d 1px 0 6px 1px;
|
||||
opacity: .45;
|
||||
}
|
||||
|
||||
#loading-bar-spinner {
|
||||
position: fixed;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
z-index: 10002;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#loading-bar-spinner .spinner-icon {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
|
||||
border: solid 2px transparent;
|
||||
border-top-color: #29d;
|
||||
border-left-color: #29d;
|
||||
border-radius: 50%;
|
||||
|
||||
-moz-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-ms-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-o-animation: loading-bar-spinner 400ms linear infinite;
|
||||
-webkit-animation: loading-bar-spinner 400ms linear infinite;
|
||||
animation: loading-bar-spinner 400ms linear infinite;
|
||||
}
|
||||
|
||||
@-webkit-keyframes loading-bar-spinner {
|
||||
0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-moz-keyframes loading-bar-spinner {
|
||||
0% { -moz-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -moz-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-o-keyframes loading-bar-spinner {
|
||||
0% { -o-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -o-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@-ms-keyframes loading-bar-spinner {
|
||||
0% { -ms-transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { -ms-transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
@keyframes loading-bar-spinner {
|
||||
0% { transform: rotate(0deg); transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
//Ajax & Static Version
|
||||
.pace {
|
||||
-webkit-pointer-events: none;
|
||||
pointer-events: none;
|
||||
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.pace-inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pace .pace-progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 100%;
|
||||
z-index: 2000;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: theme-color("primary");
|
||||
}
|
||||
@ -1,116 +0,0 @@
|
||||
@mixin button-social-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
|
||||
padding: $padding-y $padding-x;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
border: 0;
|
||||
@include border-radius($border-radius);
|
||||
|
||||
&::before {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
padding: $padding-y 0;
|
||||
font-size: $font-size;
|
||||
line-height: $line-height;
|
||||
@include border-radius($border-radius);
|
||||
}
|
||||
|
||||
span {
|
||||
margin-left: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
|
||||
&.icon {
|
||||
width: ($padding-y * 2) + ($font-size * $line-height);
|
||||
height: ($padding-y * 2) + ($font-size * $line-height);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin avatar($width, $status-width) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: $width;
|
||||
|
||||
.img-avatar {
|
||||
width: $width;
|
||||
height: $width;
|
||||
}
|
||||
|
||||
.avatar-status {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
width: $status-width;
|
||||
height: $status-width;
|
||||
border: 1px solid #fff;
|
||||
border-radius: 50em;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin borders($borders) {
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border: $size $style $color;
|
||||
} @else if $direction == "top" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-top: $size $style $color;
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-right: $size $style $color;
|
||||
} @else if $direction == "bottom" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-bottom: $size $style $color;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$style: map-get(map-get($borders, $direction), style);
|
||||
$color: map-get(map-get($borders, $direction), color);
|
||||
border-left: $size $style $color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sidebar-width($borders, $width) {
|
||||
$sidebar-width: $width;
|
||||
|
||||
@each $border in $borders {
|
||||
$direction: nth($border, 1);
|
||||
@if $direction == "all" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: ($sidebar-width - (2 * $size));
|
||||
} @else if $direction == "right" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
} @else if $direction == "left" {
|
||||
$size: map-get(map-get($borders, $direction), size);
|
||||
$sidebar-width: $sidebar-width - $size;
|
||||
}
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin bg-variant($parent, $color) {
|
||||
#{$parent} {
|
||||
@include border-radius($card-border-radius-inner $card-border-radius-inner $card-border-radius-inner $card-border-radius-inner);
|
||||
color: #fff !important;
|
||||
background-color: $color !important;
|
||||
}
|
||||
a#{$parent} {
|
||||
@include hover-focus {
|
||||
background-color: darken($color, 10%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin card-accent-variant($color) {
|
||||
border-top-width: 2px;
|
||||
border-top-color: $color;
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
@each $color, $value in $theme-colors {
|
||||
.modal-#{$color} {
|
||||
|
||||
.modal-content {
|
||||
border-color: $value;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
color: #fff;
|
||||
background-color: $value;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,35 +0,0 @@
|
||||
.nav-tabs {
|
||||
.nav-link {
|
||||
color: $gray-600;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
&.active {
|
||||
color: $gray-800;
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
&:focus {
|
||||
background: #fff;
|
||||
border-color: $border-color;
|
||||
border-bottom-color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
margin-top: -1px;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
.tab-pane {
|
||||
padding: $spacer;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
.tab-content {
|
||||
margin-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@ -1,127 +0,0 @@
|
||||
.app-header.navbar {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
height: $navbar-height;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $navbar-bg;
|
||||
@include borders($navbar-border);
|
||||
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
width: $navbar-brand-width;
|
||||
height: $navbar-height;
|
||||
padding: $navbar-padding-y $navbar-padding-x;
|
||||
margin-right: 0;
|
||||
background-color: $navbar-brand-bg;
|
||||
background-image: $navbar-brand-logo;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center center;
|
||||
background-size: $navbar-brand-logo-size;
|
||||
@include borders($navbar-brand-border);
|
||||
}
|
||||
|
||||
.navbar-toggler {
|
||||
min-width: 50px;
|
||||
padding: $navbar-toggler-padding-y 0;
|
||||
|
||||
&:hover .navbar-toggler-icon {
|
||||
background-image: $navbar-toggler-icon-hover;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggler-icon {
|
||||
height: 23px;
|
||||
background-image: $navbar-toggler-icon;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
min-width: 50px;
|
||||
margin: 0 !important;
|
||||
text-align: center;
|
||||
|
||||
button {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
background: 0;
|
||||
border: 0;
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
margin-top: -16px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
> .img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
padding-bottom: 0;
|
||||
line-height: $line-height-base;
|
||||
}
|
||||
|
||||
.dropdown-item {
|
||||
min-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
color: $navbar-active-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
.nav-link {
|
||||
color: $navbar-color;
|
||||
|
||||
@include hover-focus {
|
||||
color: $navbar-hover-color;
|
||||
}
|
||||
}
|
||||
|
||||
.open > .nav-link,
|
||||
.active > .nav-link,
|
||||
.nav-link.open,
|
||||
.nav-link.active {
|
||||
@include plain-hover-focus {
|
||||
color: $navbar-active-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-divider {
|
||||
background-color: rgba(0,0,0,.075);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.brand-minimized {
|
||||
.app-header.navbar {
|
||||
.navbar-brand {
|
||||
width: $navbar-brand-minimized-width;
|
||||
background-color: $navbar-brand-minimized-bg;
|
||||
background-image: $navbar-brand-minimized-logo;
|
||||
background-size: $navbar-brand-minimized-logo-size;
|
||||
@include borders($navbar-brand-minimized-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
// scss-lint:disable QualifyingElement
|
||||
hr.transparent {
|
||||
border-top: 1px solid transparent;
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.progress-xs {
|
||||
height: 4px;
|
||||
}
|
||||
|
||||
.progress-sm {
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
// White progress bar
|
||||
.progress-white {
|
||||
background-color: rgba(255,255,255,.2) !important;
|
||||
.progress-bar {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
@ -1,281 +0,0 @@
|
||||
//
|
||||
// RTL Support
|
||||
//
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
*[dir="rtl"] {
|
||||
direction: rtl;
|
||||
unicode-bidi: embed;
|
||||
|
||||
ul {
|
||||
-webkit-padding-start: 0;
|
||||
}
|
||||
|
||||
table tr th {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Breadcrumb
|
||||
|
||||
.breadcrumb-item {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.breadcrumb-menu {
|
||||
right: auto;
|
||||
left: $breadcrumb-padding-x;
|
||||
}
|
||||
|
||||
// Dropdown
|
||||
.dropdown-item {
|
||||
text-align: right;
|
||||
|
||||
i {
|
||||
margin-right: -10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-minimized-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
.aside-menu {
|
||||
margin-right: 0;
|
||||
margin-left: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
.aside-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
//margin-right: 0;
|
||||
margin-left: $aside-menu-width;
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-off-canvas {
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
.tab-content {
|
||||
height: calc(100vh - #{$aside-menu-nav-padding-y * 2 + $font-size-base} - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sidebar Menu
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
direction: rtl;
|
||||
i {
|
||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||
}
|
||||
.badge {
|
||||
float: left;
|
||||
margin-top: 2px;
|
||||
// margin-left: 10px;
|
||||
}
|
||||
&.nav-dropdown-toggle {
|
||||
&::before {
|
||||
position: absolute;
|
||||
right: auto !important;
|
||||
left: $sidebar-nav-link-padding-x;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(270deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-minimized .sidebar {
|
||||
.nav-link {
|
||||
padding-right: 0;
|
||||
i {
|
||||
float: right;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
.badge {
|
||||
right: auto;
|
||||
left: 15px;
|
||||
}
|
||||
}
|
||||
.nav > .nav-dropdown {
|
||||
|
||||
&:hover {
|
||||
> .nav-dropdown-items {
|
||||
right: $sidebar-minimized-width;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal bars
|
||||
.horizontal-bars {
|
||||
|
||||
li {
|
||||
|
||||
.bars {
|
||||
padding-right: 100px;
|
||||
padding-left: 0;
|
||||
|
||||
.progress:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
|
||||
li {
|
||||
|
||||
i {
|
||||
margin-right: 5px;
|
||||
margin-left: $spacer;
|
||||
}
|
||||
|
||||
.value {
|
||||
float: left;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bars {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Icon list
|
||||
.icons-list {
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.desc {
|
||||
margin-right: 50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.value {
|
||||
right: auto;
|
||||
left: 45px;
|
||||
text-align: left;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
right: auto;
|
||||
left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Callouts
|
||||
.callout {
|
||||
border: 0 solid $border-color;
|
||||
border-right-width: .25rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
left: 0;
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
.callout-default {
|
||||
border-right-color: $text-muted;
|
||||
}
|
||||
}
|
||||
@ -1,454 +0,0 @@
|
||||
// scss-lint:disable NestingDepth, SelectorDepth
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $sidebar-padding;
|
||||
color: $sidebar-color;
|
||||
background: $sidebar-bg;
|
||||
@include borders($sidebar-borders);
|
||||
|
||||
.sidebar-close {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
display: none;
|
||||
padding: 0 $spacer;
|
||||
font-size: 24px;
|
||||
font-weight: 800;
|
||||
line-height: $navbar-height;
|
||||
color: $sidebar-color;
|
||||
background: 0;
|
||||
border: 0;
|
||||
opacity: .8;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Will be added soon
|
||||
// .sidebar-brand { }
|
||||
|
||||
.sidebar-header {
|
||||
flex: 0 0 $sidebar-header-height;
|
||||
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
|
||||
text-align: center;
|
||||
background: $sidebar-header-bg;
|
||||
}
|
||||
|
||||
.sidebar-form .form-control {
|
||||
color: $sidebar-form-color;
|
||||
background: $sidebar-form-bg;
|
||||
border: $sidebar-form-border;
|
||||
|
||||
&::placeholder {
|
||||
color: $sidebar-form-placeholder-color;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($sidebar-bg, 5%);
|
||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($sidebar-bg, 10%);
|
||||
background-clip: content-box;
|
||||
border-color: transparent;
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
flex-direction: column;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: $sidebar-nav-title-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.nav-divider, .divider {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
|
||||
.nav-item {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-link-color;
|
||||
text-decoration: none;
|
||||
background: $sidebar-nav-link-bg;
|
||||
@include borders($sidebar-nav-link-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $sidebar-nav-link-active-color;
|
||||
background: $sidebar-nav-link-active-bg;
|
||||
@include borders($sidebar-nav-link-active-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-active-icon-color;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.nav-link-#{$color} {
|
||||
background: $value;
|
||||
i {
|
||||
color: rgba(255,255,255,.7);
|
||||
}
|
||||
&:hover {
|
||||
background: darken($value,5%) !important;
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
margin-top: -4px;
|
||||
content: "";
|
||||
background-image: $sidebar-nav-dropdown-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
// ex. <li class="nav-item nav-dropdown">
|
||||
.nav-dropdown.open {
|
||||
background: $sidebar-nav-dropdown-bg;
|
||||
@include borders($sidebar-nav-dropdown-borders);
|
||||
@if $enable-sidebar-nav-rounded {
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
> .nav-dropdown-items {
|
||||
max-height: 1500px;
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
color: $sidebar-nav-dropdown-color;
|
||||
border-left: 0 !important;
|
||||
}
|
||||
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.nav-dropdown.open {
|
||||
border-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-label {
|
||||
display: block;
|
||||
padding: ($sidebar-nav-link-padding-y / 8) $sidebar-nav-link-padding-x;
|
||||
color: $sidebar-nav-title-color;
|
||||
|
||||
&:hover {
|
||||
color: $sidebar-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
i {
|
||||
width: 20px;
|
||||
margin: -3px ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 10px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
@if (lightness( $sidebar-bg ) < 40) {
|
||||
.progress {
|
||||
background-color: lighten($sidebar-bg, 15%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-footer {
|
||||
flex: 0 0 $sidebar-footer-height;
|
||||
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
|
||||
background: $sidebar-footer-bg;
|
||||
@include borders($sidebar-footer-borders);
|
||||
}
|
||||
|
||||
.sidebar-minimizer {
|
||||
position: relative;
|
||||
flex: 0 0 $sidebar-minimizer-height;
|
||||
background-color: $sidebar-minimizer-bg;
|
||||
border: 0;
|
||||
@include borders($sidebar-minimizer-borders);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: $sidebar-minimizer-height;
|
||||
height: $sidebar-minimizer-height;
|
||||
content: "";
|
||||
background-image: $sidebar-minimizer-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: $sidebar-minimizer-height / 4;
|
||||
transition: .3s;
|
||||
}
|
||||
|
||||
&:focus,
|
||||
&.focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: $sidebar-minimizer-hover-bg;
|
||||
&::before {
|
||||
background-image: $sidebar-minimizer-hover-indicator;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.sidebar-compact {
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-compact-width);
|
||||
|
||||
.nav-title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-compact-width;
|
||||
border-left: 0 !important;
|
||||
|
||||
.nav-link {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: $spacer / 4 0;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
|
||||
&::before {
|
||||
top: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Minimized Sidebar
|
||||
.sidebar-minimized {
|
||||
.hidden-cn {
|
||||
display: none;
|
||||
}
|
||||
.sidebar {
|
||||
z-index: $zindex-sticky - 1;
|
||||
|
||||
.sidebar-nav {
|
||||
overflow: visible;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav-divider, .divider,
|
||||
.nav-title,
|
||||
.sidebar-footer,
|
||||
.sidebar-form,
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-minimizer::before {
|
||||
width: 100%;
|
||||
transform: rotate(-180deg);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
width: $sidebar-minimized-width;
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
overflow: visible;
|
||||
|
||||
> .nav-link {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
i {
|
||||
color: $sidebar-nav-link-hover-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
position: relative;
|
||||
padding-left: 0;
|
||||
margin: 0;
|
||||
white-space: nowrap;
|
||||
border-left: 0 !important;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: $sidebar-minimized-height;
|
||||
// padding: 0;
|
||||
// margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-dropdown-items {
|
||||
.nav-item {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
width: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.nav > .nav-dropdown {
|
||||
> .nav-dropdown-items {
|
||||
display: none;
|
||||
max-height: 1000px;
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
> .nav-dropdown-items {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,301 +0,0 @@
|
||||
@mixin switch-size($width, $height, $font-size, $handle-margin) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
|
||||
.switch-label {
|
||||
font-size: $font-size;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch($type, $width, $height, $font-size, $handle-margin) {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
width: $width;
|
||||
height: $height;
|
||||
background-color: transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.switch-input {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.switch-label {
|
||||
position: relative;
|
||||
display: block;
|
||||
height: inherit;
|
||||
@if $type == icon {
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
font-size: $font-size;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
@if $type == ddd {
|
||||
background-color: $gray-100;
|
||||
} @else {
|
||||
background-color: #fff;
|
||||
}
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 2px;
|
||||
transition: opacity background .15s ease-out;
|
||||
}
|
||||
@if $type == text or $type == icon {
|
||||
.switch-label::before,
|
||||
.switch-label::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 50%;
|
||||
margin-top: -.5em;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
transition: inherit;
|
||||
}
|
||||
.switch-label::before {
|
||||
right: 1px;
|
||||
color: $gray-200;
|
||||
content: attr(data-off);
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 1px;
|
||||
color: #fff;
|
||||
content: attr(data-on);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
.switch-input:checked ~ .switch-label {
|
||||
//background: $gray-lightest;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::before {
|
||||
opacity: 0;
|
||||
}
|
||||
.switch-input:checked ~ .switch-label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.switch-handle {
|
||||
position: absolute;
|
||||
top: $handle-margin;
|
||||
left: $handle-margin;
|
||||
width: $height - $handle-margin * 2;
|
||||
height: $height - $handle-margin * 2;
|
||||
background: #fff;
|
||||
border: 1px solid $border-color;
|
||||
border-radius: 1px;
|
||||
transition: left .15s ease-out;
|
||||
@if $type == ddd {
|
||||
border: 0;
|
||||
box-shadow: 0 2px 5px rgba(0, 0, 0, .3);
|
||||
}
|
||||
}
|
||||
|
||||
.switch-input:checked ~ .switch-handle {
|
||||
left: $width - $height + $handle-margin;
|
||||
}
|
||||
|
||||
|
||||
@if $type == ddd {
|
||||
@extend .switch-pill;
|
||||
}
|
||||
|
||||
//size variations
|
||||
@if $type == default {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == text {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-text-lg-width, $switch-text-lg-height, $switch-text-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-text-sm-width, $switch-text-sm-height, $switch-text-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-text-xs-width, $switch-text-xs-height, $switch-text-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == icon {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-icon-lg-width, $switch-icon-lg-height, $switch-icon-lg-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-icon-sm-width, $switch-icon-sm-height, $switch-icon-sm-font-size, $handle-margin);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-icon-xs-width, $switch-icon-xs-height, $switch-icon-xs-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
} @else if $type == ddd {
|
||||
|
||||
&.switch-lg {
|
||||
@include switch-size($switch-lg-width, $switch-lg-height, $switch-lg-font-size, 0);
|
||||
}
|
||||
&.switch-sm {
|
||||
@include switch-size($switch-sm-width, $switch-sm-height, $switch-sm-font-size, 0);
|
||||
}
|
||||
&.switch-xs {
|
||||
@include switch-size($switch-xs-width, $switch-xs-height, $switch-xs-font-size, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: $color !important;
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: darken($color,10%);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin switch-outline-alt-variant($color) {
|
||||
> .switch-input:checked ~ .switch-label {
|
||||
background: #fff !important;
|
||||
border-color: $color;
|
||||
|
||||
&::after {
|
||||
color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
> .switch-input:checked ~ .switch-handle {
|
||||
background: $color !important;
|
||||
border-color: $color;
|
||||
}
|
||||
}
|
||||
|
||||
$switch-lg-width: 48px;
|
||||
$switch-lg-height: 28px;
|
||||
$switch-lg-font-size: 12px;
|
||||
|
||||
$switch-width: 40px;
|
||||
$switch-height: 24px;
|
||||
$switch-font-size: 10px;
|
||||
|
||||
$handle-margin: 2px;
|
||||
|
||||
$switch-sm-width: 32px;
|
||||
$switch-sm-height: 20px;
|
||||
$switch-sm-font-size: 8px;
|
||||
|
||||
$switch-xs-width: 24px;
|
||||
$switch-xs-height: 16px;
|
||||
$switch-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-text-lg-width: 56px;
|
||||
$switch-text-lg-height: 28px;
|
||||
$switch-text-lg-font-size: 12px;
|
||||
|
||||
$switch-text-width: 48px;
|
||||
$switch-text-height: 24px;
|
||||
$switch-text-font-size: 10px;
|
||||
|
||||
$switch-text-sm-width: 40px;
|
||||
$switch-text-sm-height: 20px;
|
||||
$switch-text-sm-font-size: 8px;
|
||||
|
||||
$switch-text-xs-width: 32px;
|
||||
$switch-text-xs-height: 16px;
|
||||
$switch-text-xs-font-size: 7px;
|
||||
|
||||
|
||||
$switch-icon-lg-width: 56px;
|
||||
$switch-icon-lg-height: 28px;
|
||||
$switch-icon-lg-font-size: 12px;
|
||||
|
||||
$switch-icon-width: 48px;
|
||||
$switch-icon-height: 24px;
|
||||
$switch-icon-font-size: 10px;
|
||||
|
||||
$switch-icon-sm-width: 40px;
|
||||
$switch-icon-sm-height: 20px;
|
||||
$switch-icon-sm-font-size: 8px;
|
||||
|
||||
$switch-icon-xs-width: 32px;
|
||||
$switch-icon-xs-height: 16px;
|
||||
$switch-icon-xs-font-size: 7px;
|
||||
|
||||
.switch.switch-default {
|
||||
@include switch('default', $switch-width, $switch-height, $switch-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-text {
|
||||
@include switch('text', $switch-text-width, $switch-text-height, $switch-text-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-icon {
|
||||
@include switch('icon', $switch-icon-width, $switch-icon-height, $switch-icon-font-size, $handle-margin);
|
||||
}
|
||||
|
||||
.switch.switch-3d {
|
||||
@include switch('ddd', $switch-width, $switch-height, $switch-font-size, 0);
|
||||
}
|
||||
|
||||
//pills style
|
||||
.switch-pill {
|
||||
.switch-label,
|
||||
.switch-handle {
|
||||
border-radius: 50em !important;
|
||||
}
|
||||
|
||||
.switch-label::before {
|
||||
right: 2px !important;
|
||||
}
|
||||
.switch-label::after {
|
||||
left: 2px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
//normal style
|
||||
.switch-#{$color} {
|
||||
@include switch-variant($value);
|
||||
}
|
||||
//outline style
|
||||
.switch-#{$color}-outline {
|
||||
@include switch-outline-variant($value);
|
||||
}
|
||||
//outline alternative style
|
||||
.switch-#{$color}-outline-alt {
|
||||
@include switch-outline-alt-variant($value);
|
||||
}
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
.table-outline {
|
||||
border: 1px solid $table-border-color;
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-align-middle {
|
||||
|
||||
td {
|
||||
vertical-align: middle;
|
||||
}
|
||||
}
|
||||
|
||||
.table-clear {
|
||||
td {
|
||||
border: 0;
|
||||
}
|
||||
}
|
||||
@ -1,37 +0,0 @@
|
||||
.pagination-datatables, .pagination {
|
||||
li {
|
||||
@extend .page-item;
|
||||
|
||||
a {
|
||||
@extend .page-link;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.label-pill {
|
||||
border-radius: 1rem !important;
|
||||
}
|
||||
|
||||
// temp fix for Vue & React
|
||||
|
||||
// Open state for the dropdown
|
||||
.open, .show {
|
||||
// Remove the outline when :focus is triggered
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// navbar dropdown fix
|
||||
.navbar .dropdown-toggle {
|
||||
@extend .nav-link;
|
||||
|
||||
.img-avatar {
|
||||
height: $navbar-height - 20px;
|
||||
margin: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.card-block {
|
||||
@extend .card-body;
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
body {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.font-xs {
|
||||
font-size: .75rem !important;
|
||||
}
|
||||
|
||||
.font-sm {
|
||||
font-size: .85rem !important;
|
||||
}
|
||||
|
||||
.font-lg {
|
||||
font-size: 1rem !important;
|
||||
}
|
||||
|
||||
.font-xl {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.font-2xl {
|
||||
font-size: 1.5rem !important;
|
||||
}
|
||||
|
||||
.font-3xl {
|
||||
font-size: 1.75rem !important;
|
||||
}
|
||||
|
||||
.font-4xl {
|
||||
font-size: 2rem !important;
|
||||
}
|
||||
|
||||
.font-5xl {
|
||||
font-size: 2.5rem !important;
|
||||
}
|
||||
@ -1,3 +0,0 @@
|
||||
@import "utilities/background";
|
||||
@import "utilities/borders";
|
||||
@import "utilities/display";
|
||||
@ -1,219 +0,0 @@
|
||||
// scss-lint:disable all
|
||||
// Core Admin Variables
|
||||
|
||||
$enable-sidebar-nav-rounded: false !default;
|
||||
|
||||
$border-color: $gray-200 !default;
|
||||
$layout-transition-speed: .25s !default;
|
||||
|
||||
// Social Colors
|
||||
|
||||
$facebook: #3b5998 !default;
|
||||
$twitter: #00aced !default;
|
||||
$linkedin: #4875b4 !default;
|
||||
$google-plus: #d34836 !default;
|
||||
$flickr: #ff0084 !default;
|
||||
$tumblr: #32506d !default;
|
||||
$xing: #026466 !default;
|
||||
$github: #4183c4 !default;
|
||||
$html5: #e34f26 !default;
|
||||
$openid: #f78c40 !default;
|
||||
$stack-overflow: #fe7a15 !default;
|
||||
$youtube: #b00 !default;
|
||||
$css3: #0170ba !default;
|
||||
$dribbble: #ea4c89 !default;
|
||||
$google-plus: #bb4b39 !default;
|
||||
$instagram: #517fa4 !default;
|
||||
$pinterest: #cb2027 !default;
|
||||
$vk: #45668e !default;
|
||||
$yahoo: #400191 !default;
|
||||
$behance: #1769ff !default;
|
||||
$dropbox: #007ee5 !default;
|
||||
$reddit: #ff4500 !default;
|
||||
$spotify: #7ab800 !default;
|
||||
$vine: #00bf8f !default;
|
||||
$foursquare: #1073af !default;
|
||||
$vimeo: #aad450 !default;
|
||||
|
||||
// Navbar
|
||||
|
||||
$navbar-height: 55px !default;
|
||||
$navbar-bg: #fff !default;
|
||||
$navbar-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$navbar-brand-width: 155px !default;
|
||||
$navbar-brand-bg: #fff !default;
|
||||
$navbar-brand-logo: url('../img/logo.png') !default;
|
||||
$navbar-brand-logo-size: 70px auto !default;
|
||||
$navbar-brand-border: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$navbar-brand-minimized-width: 50px !default;
|
||||
$navbar-brand-minimized-bg: $navbar-brand-bg !default;
|
||||
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
|
||||
$navbar-brand-minimized-logo-size: 24px !default;
|
||||
$navbar-brand-minimized-border: $navbar-brand-border !default;
|
||||
|
||||
$navbar-color: $gray-600 !default;
|
||||
$navbar-hover-color: $gray-800 !default;
|
||||
$navbar-active-color: $gray-800 !default;
|
||||
$navbar-disabled-color: $gray-300 !default;
|
||||
|
||||
$navbar-toggler-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$navbar-toggler-icon-hover: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-hover-color}' stroke-width='2.25' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar
|
||||
|
||||
$sidebar-width: 200px !default;
|
||||
$sidebar-padding: 0 !default;
|
||||
$sidebar-minimized-width: 50px !default;
|
||||
$sidebar-minimized-height: $sidebar-minimized-width !default;
|
||||
$sidebar-compact-width: 150px !default;
|
||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||
$sidebar-color: #fff !default;
|
||||
$sidebar-bg: $gray-800 !default;
|
||||
$sidebar-borders: none !default;
|
||||
$mobile-sidebar-width: 220px !default;
|
||||
|
||||
// Sidebar Header
|
||||
|
||||
$sidebar-header-height: auto !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-header-padding-y: .75rem !default;
|
||||
$sidebar-header-padding-x: 1rem !default;
|
||||
|
||||
// Sidebar Form
|
||||
|
||||
$sidebar-form-border: 0 !default;
|
||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
||||
$sidebar-form-color: #fff !default;
|
||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
||||
|
||||
// Sidebar Navigation
|
||||
|
||||
$sidebar-nav-color: #fff !default;
|
||||
$sidebar-nav-title-padding-y: .75rem !default;
|
||||
$sidebar-nav-title-padding-x: 1rem !default;
|
||||
$sidebar-nav-title-color: $gray-200 !default;
|
||||
$sidebar-nav-link-padding-y: .75rem !default;
|
||||
$sidebar-nav-link-padding-x: 1rem !default;
|
||||
$sidebar-nav-link-color: #fff !default;
|
||||
$sidebar-nav-link-bg: transparent !default;
|
||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||
$sidebar-nav-link-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-hover-color: #fff !default;
|
||||
$sidebar-nav-link-hover-bg: theme-color("primary") !default;
|
||||
$sidebar-nav-link-hover-icon-color: #fff !default;
|
||||
$sidebar-nav-link-hover-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-link-active-color: #fff !default;
|
||||
$sidebar-nav-link-active-bg: lighten($sidebar-bg, 5%) !default;
|
||||
$sidebar-nav-link-active-icon-color: theme-color("primary") !default;
|
||||
$sidebar-nav-link-active-borders: 0 !default;
|
||||
|
||||
$sidebar-nav-dropdown-color: #fff !default;
|
||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-nav-dropdown-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
||||
$sidebar-nav-dropdown-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-nav-dropdown-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-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
||||
$sidebar-nav-dropdown-indicator-hover: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-nav-dropdown-indicator-hover-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 Footer
|
||||
|
||||
$sidebar-footer-height: auto !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-padding-y: .75rem !default;
|
||||
$sidebar-footer-padding-x: 1rem !default;
|
||||
$sidebar-footer-borders: 0 !default;
|
||||
|
||||
// Sidebar Minimizer
|
||||
|
||||
$sidebar-minimizer-height: 50px !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: 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-indicator-color:$sidebar-nav-link-hover-color !default;
|
||||
$sidebar-minimizer-hover-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-hover-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;
|
||||
|
||||
|
||||
// Top Navigation
|
||||
|
||||
$top-nav-bg: #fff !default;
|
||||
$top-nav-color: $body-color !default;
|
||||
$top-nav-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
$top-nav-ul-borders: (
|
||||
all: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$top-nav-hover-color: #fff !default;
|
||||
$top-nav-hover-bg: theme-color("primary") !default;
|
||||
$top-nav-active-color: #fff !default;
|
||||
$top-nav-active-bg: theme-color("primary") !default;
|
||||
$top-nav-height: $navbar-height - 15px !default;
|
||||
|
||||
// Breadcrumb
|
||||
$breadcrumb-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Aside
|
||||
|
||||
$aside-menu-width: 250px !default;
|
||||
$aside-menu-color: $gray-800 !default;
|
||||
$aside-menu-bg: #fff !default;
|
||||
$aside-menu-borders: (
|
||||
left: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
$aside-menu-nav-padding-y: .75rem !default;
|
||||
$aside-menu-nav-padding-x: 1rem !default;
|
||||
|
||||
// Footer
|
||||
|
||||
$footer-height: 50px !default;
|
||||
$footer-bg: $gray-100 !default;
|
||||
$footer-color: $body-color !default;
|
||||
$footer-borders: (
|
||||
top: (
|
||||
size: 1px,
|
||||
style: solid,
|
||||
color: $border-color
|
||||
)
|
||||
) !default;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-icon-bg: transparent !default;
|
||||
$card-icon-color: $body-color !default;
|
||||
@ -1,253 +0,0 @@
|
||||
// .social-box
|
||||
.social-box {
|
||||
min-height: 160px;
|
||||
margin-bottom: 2 * $card-spacer-y;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
border: $card-border-width solid $card-border-color;
|
||||
@include border-radius($card-border-radius);
|
||||
|
||||
i {
|
||||
display: block;
|
||||
margin: -1px -1px 0;
|
||||
font-size: 40px;
|
||||
line-height: 90px;
|
||||
background: $gray-200;
|
||||
|
||||
@include border-radius($card-border-radius $card-border-radius 0 0);
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
height: 90px;
|
||||
margin: -90px 0 0;
|
||||
|
||||
canvas {
|
||||
width: 100% !important;
|
||||
height: 90px !important;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
padding: 10px 0;
|
||||
list-style: none;
|
||||
|
||||
|
||||
li {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 50%;
|
||||
|
||||
&:first-child {
|
||||
border-right: 1px solid $border-color;
|
||||
}
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 10px;
|
||||
font-weight: 500;
|
||||
color: $border-color;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.facebook {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $facebook;
|
||||
}
|
||||
}
|
||||
|
||||
&.twitter {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $twitter;
|
||||
}
|
||||
}
|
||||
|
||||
&.linkedin {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $linkedin;
|
||||
}
|
||||
}
|
||||
|
||||
&.google-plus {
|
||||
i {
|
||||
color: #fff;
|
||||
background: $google-plus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.horizontal-bars {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
.title {
|
||||
width: 100px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: $text-muted;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.bars {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
width: 100%;
|
||||
padding-left: 100px;
|
||||
|
||||
.progress:first-child {
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.legend {
|
||||
text-align: center;
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.type-2 {
|
||||
|
||||
li {
|
||||
overflow: hidden;
|
||||
|
||||
i {
|
||||
display: inline-block;
|
||||
margin-right: $spacer;
|
||||
margin-left: 5px;
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
.title {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
margin-top: -9px;
|
||||
font-size: $font-size-base;
|
||||
font-weight: normal;
|
||||
line-height: 40px;
|
||||
color: $body-color;
|
||||
}
|
||||
|
||||
.value {
|
||||
float: right;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.bars {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icons-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
|
||||
i {
|
||||
display: block;
|
||||
float: left;
|
||||
width: 35px !important;
|
||||
height: 35px !important;
|
||||
margin: 2px;
|
||||
line-height: 35px !important;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.desc {
|
||||
height: 40px;
|
||||
margin-left: 50px;
|
||||
border-bottom: 1px solid $border-color;
|
||||
|
||||
.title {
|
||||
padding: 2px 0 0;
|
||||
margin: 0;
|
||||
}
|
||||
small {
|
||||
display: block;
|
||||
margin-top: -4px;
|
||||
color: $text-muted;
|
||||
}
|
||||
}
|
||||
|
||||
.value {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 45px;
|
||||
text-align: right;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
margin-top: -3px;
|
||||
}
|
||||
}
|
||||
|
||||
.actions {
|
||||
position: absolute;
|
||||
top: -4px;
|
||||
right: 10px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
float: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
&.divider {
|
||||
height: 40px;
|
||||
|
||||
i {
|
||||
width: auto;
|
||||
height: auto;
|
||||
margin: 2px 0 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,47 +0,0 @@
|
||||
// Import core styles
|
||||
@import "variables";
|
||||
@import "mixins";
|
||||
|
||||
// Additional typography
|
||||
@import "typography";
|
||||
|
||||
// Animations
|
||||
@import "animate";
|
||||
|
||||
// Components
|
||||
@import "aside";
|
||||
@import "avatars";
|
||||
@import "badge";
|
||||
@import "breadcrumb-menu";
|
||||
@import "breadcrumb";
|
||||
@import "buttons";
|
||||
@import "callout";
|
||||
@import "card";
|
||||
@import "charts";
|
||||
@import "dropdown";
|
||||
@import "footer";
|
||||
@import "grid";
|
||||
@import "input-group";
|
||||
@import "loading";
|
||||
@import "modal";
|
||||
@import "nav";
|
||||
@import "navbar";
|
||||
@import "progress";
|
||||
@import "sidebar";
|
||||
@import "switches";
|
||||
@import "tables";
|
||||
@import "widgets";
|
||||
|
||||
// Layout Options
|
||||
@import "layout";
|
||||
|
||||
@import "others";
|
||||
|
||||
// Utility classes
|
||||
@import "utilities";
|
||||
|
||||
// Temporary fixes
|
||||
@import "temp";
|
||||
|
||||
// Right-to-left
|
||||
@import "rtl";
|
||||
@ -1,8 +0,0 @@
|
||||
.bg-primary,
|
||||
.bg-success,
|
||||
.bg-info,
|
||||
.bg-warning,
|
||||
.bg-danger,
|
||||
.bg-inverse {
|
||||
color: #fff;
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
//border
|
||||
@each $prop, $abbrev in (border: b) {
|
||||
@each $size in (0,1,2) {
|
||||
@if $size == 0 {
|
||||
.#{$abbrev}-a-#{$size} { #{$prop}: 0 !important; } // a = All sides
|
||||
.#{$abbrev}-t-#{$size} { #{$prop}-top: 0 !important; }
|
||||
.#{$abbrev}-r-#{$size} { #{$prop}-right: 0 !important; }
|
||||
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: 0 !important; }
|
||||
.#{$abbrev}-l-#{$size} { #{$prop}-left: 0 !important; }
|
||||
} @else {
|
||||
.#{$abbrev}-a-#{$size} { #{$prop}: $size * $border-width solid $border-color !important; } // a = All sides
|
||||
.#{$abbrev}-t-#{$size} { #{$prop}-top: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-r-#{$size} { #{$prop}-right: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-b-#{$size} { #{$prop}-bottom: $size * $border-width solid $border-color !important; }
|
||||
.#{$abbrev}-l-#{$size} { #{$prop}-left: $size * $border-width solid $border-color !important; }
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
//
|
||||
// Utilities for common `display` values
|
||||
//
|
||||
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-down($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
.d#{$infix}-down-none { display: none !important; }
|
||||
// .d#{$infix}-inline { display: inline !important; }
|
||||
// .d#{$infix}-inline-block { display: inline-block !important; }
|
||||
// .d#{$infix}-block { display: block !important; }
|
||||
// .d#{$infix}-table { display: table !important; }
|
||||
// .d#{$infix}-table-cell { display: table-cell !important; }
|
||||
// .d#{$infix}-flex { display: flex !important; }
|
||||
// .d#{$infix}-inline-flex { display: inline-flex !important; }
|
||||
}
|
||||
}
|
||||
@ -1,22 +0,0 @@
|
||||
/*!
|
||||
* CoreUI - Open Source Bootstrap Admin Template
|
||||
* @version v1.0.10
|
||||
* @link http://coreui.io
|
||||
* Copyright (c) 2018 creativeLabs Łukasz Holeczek
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
// Override Boostrap variables
|
||||
@import "bootstrap-variables";
|
||||
|
||||
// Import Bootstrap source files
|
||||
@import "node_modules/bootstrap/scss/bootstrap";
|
||||
|
||||
// Override core variables
|
||||
@import "core-variables";
|
||||
|
||||
// Import core styles
|
||||
@import "core/core";
|
||||
|
||||
// Custom styles
|
||||
@import "custom";
|
||||
@ -1,6 +0,0 @@
|
||||
@import "node_modules/bootstrap/scss/functions";
|
||||
@import "../bootstrap-variables";
|
||||
@import "node_modules/bootstrap/scss/variables";
|
||||
@import "node_modules/bootstrap/scss/mixins";
|
||||
@import "../core-variables";
|
||||
@import "../core/variables";
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Aside",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Aside.js"
|
||||
}
|
||||
@ -1,55 +0,0 @@
|
||||
import React from 'react';
|
||||
import {Route, Link} from 'react-router-dom';
|
||||
import {Breadcrumb, BreadcrumbItem} from 'reactstrap';
|
||||
import routes from '../../routes';
|
||||
|
||||
const findRouteName = url => routes[url];
|
||||
|
||||
const getPaths = (pathname) => {
|
||||
const paths = ['/'];
|
||||
|
||||
if (pathname === '/') return paths;
|
||||
|
||||
pathname.split('/').reduce((prev, curr, index) => {
|
||||
const currPath = `${prev}/${curr}`;
|
||||
paths.push(currPath);
|
||||
return currPath;
|
||||
});
|
||||
return paths;
|
||||
};
|
||||
|
||||
const BreadcrumbsItem = ({...rest, match}) => {
|
||||
const routeName = findRouteName(match.url);
|
||||
if (routeName) {
|
||||
return (
|
||||
match.isExact ?
|
||||
(
|
||||
<BreadcrumbItem active>{routeName}</BreadcrumbItem>
|
||||
) :
|
||||
(
|
||||
<BreadcrumbItem>
|
||||
<Link to={match.url || ''}>
|
||||
{routeName}
|
||||
</Link>
|
||||
</BreadcrumbItem>
|
||||
)
|
||||
);
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
const Breadcrumbs = ({...rest, location : {pathname}, match}) => {
|
||||
const paths = getPaths(pathname);
|
||||
const items = paths.map((path, i) => <Route key={i++} path={path} component={BreadcrumbsItem}/>);
|
||||
return (
|
||||
<Breadcrumb>
|
||||
{items}
|
||||
</Breadcrumb>
|
||||
);
|
||||
};
|
||||
|
||||
export default props => (
|
||||
<div>
|
||||
<Route path="/:path" component={Breadcrumbs} {...props} />
|
||||
</div>
|
||||
);
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Breadcrumb",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Breadcrumb.js"
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Footer extends Component {
|
||||
render() {
|
||||
return (
|
||||
<footer className="app-footer">
|
||||
<span><a href="http://coreui.io">CoreUI</a> © 2018 creativeLabs.</span>
|
||||
<span className="ml-auto">Powered by <a href="http://coreui.io">CoreUI</a></span>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Footer;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Footer",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Footer.js"
|
||||
}
|
||||
@ -1,80 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {
|
||||
Nav,
|
||||
NavbarBrand,
|
||||
NavbarToggler,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Badge
|
||||
} from 'reactstrap';
|
||||
import HeaderDropdown from './HeaderDropdown';
|
||||
|
||||
class Header extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
sidebarToggle(e) {
|
||||
e.preventDefault();
|
||||
document.body.classList.toggle('sidebar-hidden');
|
||||
}
|
||||
|
||||
sidebarMinimize(e) {
|
||||
e.preventDefault();
|
||||
document.body.classList.toggle('sidebar-minimized');
|
||||
}
|
||||
|
||||
mobileSidebarToggle(e) {
|
||||
e.preventDefault();
|
||||
document.body.classList.toggle('sidebar-mobile-show');
|
||||
}
|
||||
|
||||
asideToggle(e) {
|
||||
e.preventDefault();
|
||||
document.body.classList.toggle('aside-menu-hidden');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<header className="app-header navbar">
|
||||
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</NavbarToggler>
|
||||
<NavbarBrand href="#"></NavbarBrand>
|
||||
<NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</NavbarToggler>
|
||||
<Nav className="d-md-down-none" navbar>
|
||||
<NavItem className="px-3">
|
||||
<NavLink href="#">Dashboard</NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="px-3">
|
||||
<NavLink href="#">Users</NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="px-3">
|
||||
<NavLink href="#">Settings</NavLink>
|
||||
</NavItem>
|
||||
</Nav>
|
||||
<Nav className="ml-auto" navbar>
|
||||
<NavItem className="d-md-down-none">
|
||||
<NavLink href="#"><i className="icon-bell"></i><Badge pill color="danger">5</Badge></NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="d-md-down-none">
|
||||
<NavLink href="#"><i className="icon-list"></i></NavLink>
|
||||
</NavItem>
|
||||
<NavItem className="d-md-down-none">
|
||||
<NavLink href="#"><i className="icon-location-pin"></i></NavLink>
|
||||
</NavItem>
|
||||
<HeaderDropdown/>
|
||||
</Nav>
|
||||
<NavbarToggler className="d-md-down-none" onClick={this.asideToggle}>
|
||||
<span className="navbar-toggler-icon"></span>
|
||||
</NavbarToggler>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Header;
|
||||
@ -1,60 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {
|
||||
Badge,
|
||||
DropdownItem,
|
||||
DropdownMenu,
|
||||
DropdownToggle,
|
||||
Dropdown
|
||||
} from 'reactstrap';
|
||||
|
||||
class HeaderDropdown extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.state = {
|
||||
dropdownOpen: false
|
||||
};
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({
|
||||
dropdownOpen: !this.state.dropdownOpen
|
||||
});
|
||||
}
|
||||
|
||||
dropAccnt() {
|
||||
return (
|
||||
<Dropdown nav isOpen={this.state.dropdownOpen} toggle={this.toggle}>
|
||||
<DropdownToggle nav>
|
||||
<img src={'img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com"/>
|
||||
</DropdownToggle>
|
||||
<DropdownMenu right>
|
||||
<DropdownItem header tag="div" className="text-center"><strong>Account</strong></DropdownItem>
|
||||
<DropdownItem><i className="fa fa-bell-o"></i> Updates<Badge color="info">42</Badge></DropdownItem>
|
||||
<DropdownItem><i className="fa fa-envelope-o"></i> Messages<Badge color="success">42</Badge></DropdownItem>
|
||||
<DropdownItem><i className="fa fa-tasks"></i> Tasks<Badge color="danger">42</Badge></DropdownItem>
|
||||
<DropdownItem><i className="fa fa-comments"></i> Comments<Badge color="warning">42</Badge></DropdownItem>
|
||||
<DropdownItem header tag="div" className="text-center"><strong>Settings</strong></DropdownItem>
|
||||
<DropdownItem><i className="fa fa-user"></i> Profile</DropdownItem>
|
||||
<DropdownItem><i className="fa fa-wrench"></i> Settings</DropdownItem>
|
||||
<DropdownItem><i className="fa fa-usd"></i> Payments<Badge color="secondary">42</Badge></DropdownItem>
|
||||
<DropdownItem><i className="fa fa-file"></i> Projects<Badge color="primary">42</Badge></DropdownItem>
|
||||
<DropdownItem divider/>
|
||||
<DropdownItem><i className="fa fa-shield"></i> Lock Account</DropdownItem>
|
||||
<DropdownItem><i className="fa fa-lock"></i> Logout</DropdownItem>
|
||||
</DropdownMenu>
|
||||
</Dropdown>
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {...attributes} = this.props;
|
||||
return (
|
||||
this.dropAccnt()
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default HeaderDropdown;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Header",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Header.js"
|
||||
}
|
||||
@ -1,164 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
import {Badge, Nav, NavItem, NavLink as RsNavLink} from 'reactstrap';
|
||||
import classNames from 'classnames';
|
||||
import nav from './_nav';
|
||||
import SidebarFooter from './../SidebarFooter';
|
||||
import SidebarForm from './../SidebarForm';
|
||||
import SidebarHeader from './../SidebarHeader';
|
||||
import SidebarMinimizer from './../SidebarMinimizer';
|
||||
|
||||
class Sidebar extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
this.activeRoute = this.activeRoute.bind(this);
|
||||
this.hideMobile = this.hideMobile.bind(this);
|
||||
}
|
||||
|
||||
|
||||
handleClick(e) {
|
||||
e.preventDefault();
|
||||
e.target.parentElement.classList.toggle('open');
|
||||
}
|
||||
|
||||
activeRoute(routeName, props) {
|
||||
// return this.props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
|
||||
return props.location.pathname.indexOf(routeName) > -1 ? 'nav-item nav-dropdown open' : 'nav-item nav-dropdown';
|
||||
|
||||
}
|
||||
|
||||
hideMobile() {
|
||||
if (document.body.classList.contains('sidebar-mobile-show')) {
|
||||
document.body.classList.toggle('sidebar-mobile-show')
|
||||
}
|
||||
}
|
||||
|
||||
// todo Sidebar nav secondLevel
|
||||
// secondLevelActive(routeName) {
|
||||
// return this.props.location.pathname.indexOf(routeName) > -1 ? "nav nav-second-level collapse in" : "nav nav-second-level collapse";
|
||||
// }
|
||||
|
||||
|
||||
render() {
|
||||
|
||||
const props = this.props;
|
||||
|
||||
// badge addon to NavItem
|
||||
const badge = (badge) => {
|
||||
if (badge) {
|
||||
const classes = classNames( badge.class );
|
||||
return (<Badge className={ classes } color={ badge.variant }>{ badge.text }</Badge>)
|
||||
}
|
||||
};
|
||||
|
||||
// simple wrapper for nav-title item
|
||||
const wrapper = item => { return (item.wrapper && item.wrapper.element ? (React.createElement(item.wrapper.element, item.wrapper.attributes, item.name)): item.name ) };
|
||||
|
||||
// nav list section title
|
||||
const title = (title, key) => {
|
||||
const classes = classNames( 'nav-title', title.class);
|
||||
return (<li key={key} className={ classes }>{wrapper(title)} </li>);
|
||||
};
|
||||
|
||||
// nav list divider
|
||||
const divider = (divider, key) => {
|
||||
const classes = classNames( 'divider', divider.class);
|
||||
return (<li key={key} className={ classes }></li>);
|
||||
};
|
||||
|
||||
// nav label with nav link
|
||||
const navLabel = (item, key) => {
|
||||
const classes = {
|
||||
item: classNames( 'hidden-cn', item.class ),
|
||||
link: classNames( 'nav-label', item.class ? item.class : ''),
|
||||
icon: classNames(
|
||||
!item.icon ? 'fa fa-circle' : item.icon ,
|
||||
item.label.variant ? `text-${item.label.variant}` : '',
|
||||
item.label.class ? item.label.class : ''
|
||||
)
|
||||
};
|
||||
return (
|
||||
navLink(item, key, classes)
|
||||
);
|
||||
};
|
||||
|
||||
// nav item with nav link
|
||||
const navItem = (item, key) => {
|
||||
const classes = {
|
||||
item: classNames( item.class) ,
|
||||
link: classNames( 'nav-link', item.variant ? `nav-link-${item.variant}` : ''),
|
||||
icon: classNames( item.icon )
|
||||
};
|
||||
return (
|
||||
navLink(item, key, classes)
|
||||
)
|
||||
};
|
||||
|
||||
// nav link
|
||||
const navLink = (item, key, classes) => {
|
||||
const url = item.url ? item.url : '';
|
||||
return (
|
||||
<NavItem key={key} className={classes.item}>
|
||||
{ isExternal(url) ?
|
||||
<RsNavLink href={url} className={classes.link} active>
|
||||
<i className={classes.icon}></i>{item.name}{badge(item.badge)}
|
||||
</RsNavLink>
|
||||
:
|
||||
<NavLink to={url} className={classes.link} activeClassName="active" onClick={this.hideMobile}>
|
||||
<i className={classes.icon}></i>{item.name}{badge(item.badge)}
|
||||
</NavLink>
|
||||
}
|
||||
</NavItem>
|
||||
)
|
||||
};
|
||||
|
||||
// nav dropdown
|
||||
const navDropdown = (item, key) => {
|
||||
return (
|
||||
<li key={key} className={this.activeRoute(item.url, props)}>
|
||||
<a className="nav-link nav-dropdown-toggle" href="#" onClick={this.handleClick}><i className={item.icon}></i>{item.name}</a>
|
||||
<ul className="nav-dropdown-items">
|
||||
{navList(item.children)}
|
||||
</ul>
|
||||
</li>)
|
||||
};
|
||||
|
||||
// nav type
|
||||
const navType = (item, idx) =>
|
||||
item.title ? title(item, idx) :
|
||||
item.divider ? divider(item, idx) :
|
||||
item.label ? navLabel(item, idx) :
|
||||
item.children ? navDropdown(item, idx)
|
||||
: navItem(item, idx) ;
|
||||
|
||||
// nav list
|
||||
const navList = (items) => {
|
||||
return items.map( (item, index) => navType(item, index) );
|
||||
};
|
||||
|
||||
const isExternal = (url) => {
|
||||
const link = url ? url.substring(0, 4) : '';
|
||||
return link === 'http';
|
||||
};
|
||||
|
||||
// sidebar-nav root
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<SidebarHeader/>
|
||||
<SidebarForm/>
|
||||
<nav className="sidebar-nav">
|
||||
<Nav>
|
||||
{navList(nav.items)}
|
||||
</Nav>
|
||||
</nav>
|
||||
<SidebarFooter/>
|
||||
<SidebarMinimizer/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Sidebar;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "Sidebar",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./Sidebar.js"
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class SidebarFooter extends Component {
|
||||
|
||||
render() {
|
||||
return null
|
||||
// Uncomment following code lines to add Sidebar Footer
|
||||
// return (
|
||||
// <div className="sidebar-footer"></div>
|
||||
// )
|
||||
}
|
||||
}
|
||||
|
||||
export default SidebarFooter;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "SidebarFooter",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./SidebarFooter.js"
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class SidebarForm extends Component {
|
||||
|
||||
render() {
|
||||
return null
|
||||
// Uncomment following code lines to add Sidebar Form
|
||||
// return (
|
||||
// <div className="sidebar-form"></div>
|
||||
// )
|
||||
}
|
||||
}
|
||||
|
||||
export default SidebarForm;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "SidebarForm",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./SidebarForm.js"
|
||||
}
|
||||
@ -1,14 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class SidebarHeader extends Component {
|
||||
|
||||
render() {
|
||||
return null
|
||||
// Uncomment following code lines to add Sidebar Header
|
||||
// return (
|
||||
// <div className="sidebar-header"></div>
|
||||
// )
|
||||
}
|
||||
}
|
||||
|
||||
export default SidebarHeader;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "SidebarHeader",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./SidebarHeader.js"
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class SidebarMinimizer extends Component {
|
||||
|
||||
sidebarMinimize() {
|
||||
document.body.classList.toggle('sidebar-minimized');
|
||||
}
|
||||
|
||||
brandMinimize() {
|
||||
document.body.classList.toggle('brand-minimized');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<button className="sidebar-minimizer" type="button" onClick={(event) => { this.sidebarMinimize(); this.brandMinimize() }}></button>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default SidebarMinimizer;
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"name": "SidebarMinimizer",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"main": "./SidebarMinimizer.js"
|
||||
}
|
||||
@ -1,108 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Switch, Route, Redirect} from 'react-router-dom';
|
||||
import {Container} from 'reactstrap';
|
||||
import Header from '../../components/Header/';
|
||||
import Sidebar from '../../components/Sidebar/';
|
||||
import Breadcrumb from '../../components/Breadcrumb/';
|
||||
import Aside from '../../components/Aside/';
|
||||
import Footer from '../../components/Footer/';
|
||||
|
||||
import Dashboard from '../../views/Dashboard/';
|
||||
|
||||
import Colors from '../../views/Theme/Colors/';
|
||||
import Typography from '../../views/Theme/Typography/';
|
||||
|
||||
import Charts from '../../views/Charts/';
|
||||
import Widgets from '../../views/Widgets/';
|
||||
|
||||
// Base
|
||||
import Cards from '../../views/Base/Cards/';
|
||||
import Forms from '../../views/Base/Forms/';
|
||||
import Switches from '../../views/Base/Switches/';
|
||||
import Tables from '../../views/Base/Tables/';
|
||||
import Tabs from '../../views/Base/Tabs/';
|
||||
import Breadcrumbs from '../../views/Base/Breadcrumbs/';
|
||||
import Carousels from '../../views/Base/Carousels/';
|
||||
import Collapses from '../../views/Base/Collapses/';
|
||||
import Dropdowns from '../../views/Base/Dropdowns/';
|
||||
import Jumbotrons from '../../views/Base/Jumbotrons/';
|
||||
import ListGroups from '../../views/Base/ListGroups/';
|
||||
import Navbars from '../../views/Base/Navbars/';
|
||||
import Navs from '../../views/Base/Navs/';
|
||||
import Paginations from '../../views/Base/Paginations/';
|
||||
import Popovers from '../../views/Base/Popovers/';
|
||||
import ProgressBar from '../../views/Base/ProgressBar/';
|
||||
import Tooltips from '../../views/Base/Tooltips/';
|
||||
|
||||
// Buttons
|
||||
import Buttons from '../../views/Buttons/Buttons/';
|
||||
import ButtonDropdowns from '../../views/Buttons/ButtonDropdowns/';
|
||||
import ButtonGroups from '../../views/Buttons/ButtonGroups/';
|
||||
import SocialButtons from '../../views/Buttons/SocialButtons/';
|
||||
|
||||
// Icons
|
||||
import Flags from '../../views/Icons/Flags/';
|
||||
import FontAwesome from '../../views/Icons/FontAwesome/';
|
||||
import SimpleLineIcons from '../../views/Icons/SimpleLineIcons/';
|
||||
|
||||
// Notifications
|
||||
import Alerts from '../../views/Notifications/Alerts/';
|
||||
import Badges from '../../views/Notifications/Badges/';
|
||||
import Modals from '../../views/Notifications/Modals/';
|
||||
|
||||
class Full extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="app">
|
||||
<Header/>
|
||||
<div className="app-body">
|
||||
<Sidebar {...this.props}/>
|
||||
<main className="main">
|
||||
<Breadcrumb/>
|
||||
<Container fluid>
|
||||
<Switch>
|
||||
<Route path="/dashboard" name="Dashboard" component={Dashboard}/>
|
||||
<Route path="/theme/colors" name="Colors" component={Colors}/>
|
||||
<Route path="/theme/typography" name="Typography" component={Typography}/>
|
||||
<Route path="/base/cards" name="Cards" component={Cards}/>
|
||||
<Route path="/base/forms" name="Forms" component={Forms}/>
|
||||
<Route path="/base/switches" name="Swithces" component={Switches}/>
|
||||
<Route path="/base/tables" name="Tables" component={Tables}/>
|
||||
<Route path="/base/tabs" name="Tabs" component={Tabs}/>
|
||||
<Route path="/base/breadcrumbs" name="Breadcrumbs" component={Breadcrumbs}/>
|
||||
<Route path="/base/carousels" name="Carousels" component={Carousels}/>
|
||||
<Route path="/base/collapses" name="Collapses" component={Collapses}/>
|
||||
<Route path="/base/dropdowns" name="Dropdowns" component={Dropdowns}/>
|
||||
<Route path="/base/jumbotrons" name="Jumbotrons" component={Jumbotrons}/>
|
||||
<Route path="/base/list-groups" name="ListGroups" component={ListGroups}/>
|
||||
<Route path="/base/navbars" name="Navbars" component={Navbars}/>
|
||||
<Route path="/base/navs" name="Navs" component={Navs}/>
|
||||
<Route path="/base/paginations" name="Paginations" component={Paginations}/>
|
||||
<Route path="/base/popovers" name="Popovers" component={Popovers}/>
|
||||
<Route path="/base/progress-bar" name="Progress Bar" component={ProgressBar}/>
|
||||
<Route path="/base/tooltips" name="Tooltips" component={Tooltips}/>
|
||||
<Route path="/buttons/buttons" name="Buttons" component={Buttons}/>
|
||||
<Route path="/buttons/button-dropdowns" name="ButtonDropdowns" component={ButtonDropdowns}/>
|
||||
<Route path="/buttons/button-groups" name="ButtonGroups" component={ButtonGroups}/>
|
||||
<Route path="/buttons/social-buttons" name="Social Buttons" component={SocialButtons}/>
|
||||
<Route path="/icons/flags" name="Flags" component={Flags}/>
|
||||
<Route path="/icons/font-awesome" name="Font Awesome" component={FontAwesome}/>
|
||||
<Route path="/icons/simple-line-icons" name="Simple Line Icons" component={SimpleLineIcons}/>
|
||||
<Route path="/notifications/alerts" name="Alerts" component={Alerts}/>
|
||||
<Route path="/notifications/badges" name="Badges" component={Badges}/>
|
||||
<Route path="/notifications/modals" name="Modals" component={Modals}/>
|
||||
<Route path="/widgets" name="Widgets" component={Widgets}/>
|
||||
<Route path="/charts" name="Charts" component={Charts}/>
|
||||
<Redirect from="/" to="/dashboard"/>
|
||||
</Switch>
|
||||
</Container>
|
||||
</main>
|
||||
<Aside/>
|
||||
</div>
|
||||
<Footer/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Full;
|
||||
@ -1,36 +0,0 @@
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import {HashRouter, Route, Switch} from 'react-router-dom';
|
||||
|
||||
// Styles
|
||||
// Import Flag Icons Set
|
||||
import 'flag-icon-css/css/flag-icon.min.css';
|
||||
// Import Font Awesome Icons Set
|
||||
import 'font-awesome/css/font-awesome.min.css';
|
||||
// Import Simple Line Icons Set
|
||||
import 'simple-line-icons/css/simple-line-icons.css';
|
||||
// Import Main styles for this application
|
||||
import '../scss/style.scss'
|
||||
// Temp fix for reactstrap
|
||||
import '../scss/core/_dropdown-menu-right.scss'
|
||||
|
||||
// Containers
|
||||
import Full from './containers/Full/'
|
||||
|
||||
// Views
|
||||
import Login from './views/Pages/Login/'
|
||||
import Register from './views/Pages/Register/'
|
||||
import Page404 from './views/Pages/Page404/'
|
||||
import Page500 from './views/Pages/Page500/'
|
||||
|
||||
ReactDOM.render((
|
||||
<HashRouter>
|
||||
<Switch>
|
||||
<Route exact path="/login" name="Login Page" component={Login}/>
|
||||
<Route exact path="/register" name="Register Page" component={Register}/>
|
||||
<Route exact path="/404" name="Page 404" component={Page404}/>
|
||||
<Route exact path="/500" name="Page 500" component={Page500}/>
|
||||
<Route path="/" name="Home" component={Full}/>
|
||||
</Switch>
|
||||
</HashRouter>
|
||||
), document.getElementById('root'));
|
||||
@ -1,40 +0,0 @@
|
||||
const routes = {
|
||||
'/': 'Home',
|
||||
'/base': 'Base',
|
||||
'/base/cards': 'Cards',
|
||||
'/base/forms': 'Forms',
|
||||
'/base/switches': 'Switches',
|
||||
'/base/tables': 'Tables',
|
||||
'/base/tabs': 'Tabs',
|
||||
'/base/breadcrumbs': 'Breadcrumbs',
|
||||
'/base/carousels': 'Carousels',
|
||||
'/base/collapses': 'Collapses',
|
||||
'/base/jumbotrons': 'Jumbotrons',
|
||||
'/base/list-groups': 'List Groups',
|
||||
'/base/navbars': 'Navbars',
|
||||
'/base/navs': 'Navs',
|
||||
'/base/paginations': 'Paginations',
|
||||
'/base/popovers': 'Popovers',
|
||||
'/base/progress-bar': 'Progress Bar',
|
||||
'/base/tooltips': 'Tooltips',
|
||||
'/buttons': 'Buttons',
|
||||
'/buttons/buttons': 'Buttons',
|
||||
'/buttons/social-buttons': 'Social Buttons',
|
||||
'/buttons/button-dropdowns': 'Button Dropdowns',
|
||||
'/buttons/button-groups': 'Button Groups',
|
||||
'/charts': 'Charts',
|
||||
'/dashboard': 'Dashboard',
|
||||
'/icons': 'Icons',
|
||||
'/icons/flags': 'Flags',
|
||||
'/icons/font-awesome': 'Font Awesome',
|
||||
'/icons/simple-line-icons': 'Simple Line Icons',
|
||||
'/notifications': 'Notifications',
|
||||
'/notifications/alerts': 'Alerts',
|
||||
'/notifications/badges': 'Badges',
|
||||
'/notifications/modals': 'Modals',
|
||||
'/theme': 'Theme',
|
||||
'/theme/colors': 'Colors',
|
||||
'/theme/typography': 'Typography',
|
||||
'/widgets': 'Widgets'
|
||||
};
|
||||
export default routes;
|
||||
@ -1,121 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
Collapse, Button, Fade
|
||||
} from 'reactstrap';
|
||||
|
||||
class Collapses extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onEntering = this.onEntering.bind(this);
|
||||
this.onEntered = this.onEntered.bind(this);
|
||||
this.onExiting = this.onExiting.bind(this);
|
||||
this.onExited = this.onExited.bind(this);
|
||||
this.toggle = this.toggle.bind(this);
|
||||
this.toggleFade = this.toggleFade.bind(this);
|
||||
this.state = {
|
||||
collapse: false,
|
||||
status: 'Closed',
|
||||
fadeIn: true,
|
||||
timeout: 300
|
||||
};
|
||||
}
|
||||
|
||||
onEntering() {
|
||||
this.setState({status: 'Opening...'});
|
||||
}
|
||||
|
||||
onEntered() {
|
||||
this.setState({status: 'Opened'});
|
||||
}
|
||||
|
||||
onExiting() {
|
||||
this.setState({status: 'Closing...'});
|
||||
}
|
||||
|
||||
onExited() {
|
||||
this.setState({status: 'Closed'});
|
||||
}
|
||||
|
||||
toggle() {
|
||||
this.setState({collapse: !this.state.collapse});
|
||||
}
|
||||
|
||||
toggleFade() {
|
||||
this.setState({fadeIn: !this.state.fadeIn});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Collapse</strong>
|
||||
<div className="card-actions">
|
||||
<a href="https://reactstrap.github.io/components/collapse/" target="_blank">
|
||||
<small className="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<Collapse
|
||||
isOpen={this.state.collapse}
|
||||
onEntering={this.onEntering}
|
||||
onEntered={this.onEntered}
|
||||
onExiting={this.onExiting}
|
||||
onExited={this.onExited}
|
||||
>
|
||||
<CardBody>
|
||||
<p>
|
||||
Anim pariatur cliche reprehenderit,
|
||||
enim eiusmod high life accusamus terry richardson ad squid. Nihil
|
||||
anim keffiyeh helvetica, craft beer labore wes anderson cred
|
||||
nesciunt sapiente ea proident.
|
||||
</p>
|
||||
<p>
|
||||
Donec molestie odio id nisi malesuada, mattis tincidunt velit egestas. Sed non pulvinar risus. Aenean
|
||||
elementum eleifend nunc, pellentesque dapibus arcu hendrerit fringilla. Aliquam in nibh massa. Cras
|
||||
ultricies lorem non enim volutpat, a eleifend urna placerat. Fusce id luctus urna. In sed leo tellus.
|
||||
Mauris tristique leo a nisl feugiat, eget vehicula leo venenatis. Quisque magna metus, luctus quis
|
||||
sollicitudin vel, vehicula nec ipsum. Donec rutrum commodo lacus ut condimentum. Integer vel turpis
|
||||
purus. Etiam vehicula, nulla non fringilla blandit, massa purus faucibus tellus, a luctus enim orci non
|
||||
augue. Aenean ullamcorper nisl urna, non feugiat tortor volutpat in. Vivamus lobortis massa dolor, eget
|
||||
faucibus ipsum varius eget. Pellentesque imperdiet, turpis sed sagittis lobortis, leo elit laoreet arcu,
|
||||
vehicula sagittis elit leo id nisi.
|
||||
</p>
|
||||
</CardBody>
|
||||
</Collapse>
|
||||
<CardFooter>
|
||||
<Button color="primary" onClick={this.toggle} style={{marginBottom: '1rem'}}>Toggle</Button>
|
||||
<h5>Current state: {this.state.status}</h5>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Fade</strong>
|
||||
<div className="card-actions">
|
||||
<a href="https://reactstrap.github.io/components/fade/" target="_blank">
|
||||
<small className="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Fade timeout={this.state.timeout} in={this.state.fadeIn} tag="h5" className="mt-3">
|
||||
This content will fade in and out as the button is pressed...
|
||||
</Fade>
|
||||
</CardBody>
|
||||
<CardFooter>
|
||||
<Button color="primary" onClick={this.toggleFade}>Toggle Fade</Button>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Collapses;
|
||||
@ -1,57 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {
|
||||
Row,
|
||||
Col,
|
||||
Card,
|
||||
CardHeader,
|
||||
CardBody,
|
||||
CardFooter,
|
||||
Jumbotron, Button, Container
|
||||
} from 'reactstrap';
|
||||
|
||||
class Jumbotrons extends Component {
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong>
|
||||
<div className="card-actions">
|
||||
<a href="https://reactstrap.github.io/components/jumbotron/" target="_blank">
|
||||
<small className="text-muted">docs</small>
|
||||
</a>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Jumbotron>
|
||||
<h1 className="display-3">Hello, world!</h1>
|
||||
<p className="lead">This is a simple hero unit, a simple Jumbotron-style component for calling extra
|
||||
attention to featured content or information.</p>
|
||||
<hr className="my-2"/>
|
||||
<p>It uses utility classes for typgraphy and spacing to space content out within the larger container.</p>
|
||||
<p className="lead">
|
||||
<Button color="primary">Learn More</Button>
|
||||
</p>
|
||||
</Jumbotron>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<i className="fa fa-align-justify"></i><strong>Jumbotron</strong><small> fluid</small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Jumbotron fluid>
|
||||
<Container fluid>
|
||||
<h1 className="display-3">Fluid jumbotron</h1>
|
||||
<p className="lead">This is a modified jumbotron that occupies the entire horizontal space of its parent.</p>
|
||||
</Container>
|
||||
</Jumbotron>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Jumbotrons;
|
||||
@ -1,214 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row, Col, Card, CardHeader, CardBody, Button} from 'reactstrap';
|
||||
|
||||
class Buttons extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<Row>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Options</strong>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button color="primary">Primary</Button>{' '}
|
||||
<Button color="secondary">Secondary</Button>{' '}
|
||||
<Button color="success">Success</Button>{' '}
|
||||
<Button color="warning">Warning</Button>{' '}
|
||||
<Button color="danger">Danger</Button>{' '}
|
||||
<Button color="link">Link</Button>{' '}
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>With Icons</strong>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<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="success"><i className="fa fa-magic"></i> Success</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="link"><i className="fa fa-link"></i> Link</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class <code>.btn-lg</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button color="primary" size="lg">Primary</Button>
|
||||
<Button color="secondary" size="lg">Secondary</Button>
|
||||
<Button color="success" size="lg">Success</Button>
|
||||
<Button color="info" size="lg">Info</Button>
|
||||
<Button color="warning" size="lg">Warning</Button>
|
||||
<Button color="danger" size="lg">Danger</Button>
|
||||
<Button color="link" size="lg">Link</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class <code>.btn-sm</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button color="primary" size="sm">Primary</Button>
|
||||
<Button color="secondary" size="sm">Secondary</Button>
|
||||
<Button color="success" size="sm">Success</Button>
|
||||
<Button color="info" size="sm">Info</Button>
|
||||
<Button color="warning" size="sm">Warning</Button>
|
||||
<Button color="danger" size="sm">Danger</Button>
|
||||
<Button color="link" size="sm">Link</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this <code>disabled="disabled"</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button color="primary" disabled>Primary</Button>
|
||||
<Button color="secondary" disabled>Secondary</Button>
|
||||
<Button color="success" disabled>Success</Button>
|
||||
<Button color="info" disabled>Info</Button>
|
||||
<Button color="warning" disabled>Warning</Button>
|
||||
<Button color="danger" disabled>Danger</Button>
|
||||
<Button color="link" disabled>Link</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class <code>.active</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button color="primary" active>Primary</Button>
|
||||
<Button color="secondary" active>Secondary</Button>
|
||||
<Button color="success" active>Success</Button>
|
||||
<Button color="info" active>Info</Button>
|
||||
<Button color="warning" active>Warning</Button>
|
||||
<Button color="danger" active>Danger</Button>
|
||||
<Button color="link" active>Link</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class <code>.btn-block</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button color="secondary" 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="info" 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="link" size="lg" block>Block level button</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
<Col xs="12" md="6">
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Options</strong>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button outline color="primary">Primary</Button>
|
||||
<Button outline color="secondary">Secondary</Button>
|
||||
<Button outline color="success">Success</Button>
|
||||
<Button outline color="warning">Warning</Button>
|
||||
<Button outline color="danger">Danger</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>With Icons</strong>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<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="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="danger"><i className="fa fa-rss"></i> Danger</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Large</strong>
|
||||
<small>Add this class <code>.btn-lg</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button outline color="primary" size="lg">Primary</Button>
|
||||
<Button outline color="secondary" size="lg">Secondary</Button>
|
||||
<Button outline color="success" size="lg">Success</Button>
|
||||
<Button outline color="info" size="lg">Info</Button>
|
||||
<Button outline color="warning" size="lg">Warning</Button>
|
||||
<Button outline color="danger" size="lg">Danger</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Size Small</strong>
|
||||
<small>Add this class <code>.btn-sm</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button outline color="primary" size="sm">Primary</Button>
|
||||
<Button outline color="secondary" size="sm">Secondary</Button>
|
||||
<Button outline color="success" size="sm">Success</Button>
|
||||
<Button outline color="info" size="sm">Info</Button>
|
||||
<Button outline color="warning" size="sm">Warning</Button>
|
||||
<Button outline color="danger" size="sm">Danger</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Disabled state</strong>
|
||||
<small>Add this <code>disabled="disabled"</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button outline color="primary" disabled>Primary</Button>
|
||||
<Button outline color="secondary" disabled>Secondary</Button>
|
||||
<Button color="success" disabled>Success</Button>
|
||||
<Button outline color="info" disabled>Info</Button>
|
||||
<Button outline color="warning" disabled>Warning</Button>
|
||||
<Button outline color="danger" disabled>Danger</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Active state</strong>
|
||||
<small>Add this class <code>.active</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<Button outline color="primary" active>Primary</Button>
|
||||
<Button outline color="secondary" active>Secondary</Button>
|
||||
<Button outline color="success" active>Success</Button>
|
||||
<Button outline color="info" active>Info</Button>
|
||||
<Button outline color="warning" active>Warning</Button>
|
||||
<Button outline color="danger" active>Danger</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<strong>Block Level Buttons</strong>
|
||||
<small>Add this class <code>.btn-block</code></small>
|
||||
</CardHeader>
|
||||
<CardBody>
|
||||
<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="success" 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="danger" size="lg" block>Block level button</Button>
|
||||
</CardBody>
|
||||
</Card>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Buttons;
|
||||
@ -1,318 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import {Row, Col, Card, CardHeader, CardBody, Button} 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'}}><button className="btn-facebook"><span>
|
||||
Facebook</span></Button></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'}}><button className="btn-facebook icon"><span>
|
||||
Facebook</span></Button></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'}}><button className="btn-facebook text"><span>
|
||||
Facebook</span></Button></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;
|
||||
@ -1,104 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
|
||||
class Colors extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className="animated fadeIn">
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<i className="icon-drop"></i> Theme colors
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-primary">Primary</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-secondary">Secondary</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-success">Success</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-danger">Danger</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-warning">Warning</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-info">Info</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-light">Light</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-dark">Dark</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<i className="icon-drop"></i> Grays
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row mb-3">
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 bg-gray-100">100</div>
|
||||
<div className="p-3 bg-gray-200">200</div>
|
||||
<div className="p-3 bg-gray-300">300</div>
|
||||
<div className="p-3 bg-gray-400">400</div>
|
||||
<div className="p-3 bg-gray-500">500</div>
|
||||
<div className="p-3 bg-gray-600">600</div>
|
||||
<div className="p-3 bg-gray-700">700</div>
|
||||
<div className="p-3 bg-gray-800">800</div>
|
||||
<div className="p-3 bg-gray-900">900</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card">
|
||||
<div className="card-header">
|
||||
<i className="icon-drop"></i> Additional colors
|
||||
</div>
|
||||
<div className="card-body">
|
||||
<div className="row">
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-blue">Blue</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-indigo">Indigo</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-purple">Purple</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-pink">Pink</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-red">Red</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-orange">Orange</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-yellow">Yellow</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-green">Green</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-teal">Teal</div>
|
||||
</div>
|
||||
<div className="col-md-4">
|
||||
<div className="p-3 mb-3 bg-cyan">Cyan</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default Colors;
|
||||
@ -1,63 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Card, CardBody, Progress} from 'reactstrap';
|
||||
import classNames from 'classnames';
|
||||
import {mapToCssModules} from 'reactstrap/lib/utils';
|
||||
|
||||
const propTypes = {
|
||||
header: PropTypes.string,
|
||||
mainText: PropTypes.string,
|
||||
smallText: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
cssModule: PropTypes.object,
|
||||
variant: PropTypes.string
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
header: '89.9%',
|
||||
mainText: 'Lorem ipsum...',
|
||||
smallText: 'Lorem ipsum dolor sit amet enim.',
|
||||
// color: '',
|
||||
value: "25",
|
||||
variant: ""
|
||||
};
|
||||
|
||||
class Widget01 extends Component {
|
||||
render() {
|
||||
const {className, cssModule, header, mainText, smallText, color, value, children, variant, ...attributes} = this.props;
|
||||
|
||||
// demo purposes only
|
||||
const progress = {style: "", color: color, value: value};
|
||||
const card = {style: "", bgColor: ""};
|
||||
|
||||
if (variant === "inverse") {
|
||||
progress.style = "progress-white";
|
||||
progress.color = "";
|
||||
card.style = "text-white";
|
||||
card.bgColor = 'bg-' + color;
|
||||
}
|
||||
|
||||
const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
|
||||
progress.style = classNames("progress-xs my-3", progress.style);
|
||||
|
||||
return (
|
||||
<Card className={ classes } {...attributes}>
|
||||
<CardBody>
|
||||
<div className="h4 m-0">{ header }</div>
|
||||
<div>{ mainText }</div>
|
||||
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
|
||||
<small className="text-muted">{ smallText }</small>
|
||||
<div>{children}</div>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Widget01.propTypes = propTypes;
|
||||
Widget01.defaultProps = defaultProps;
|
||||
|
||||
export default Widget01;
|
||||
@ -1,55 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import classNames from 'classnames';
|
||||
import {mapToCssModules} from 'reactstrap/lib/utils';
|
||||
|
||||
const propTypes = {
|
||||
className: PropTypes.string,
|
||||
cssModule: PropTypes.object,
|
||||
dataBox: PropTypes.func
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
dataBox: () => ({variant: "facebook", friends: "-", feeds: "-"})
|
||||
};
|
||||
|
||||
class Widget03 extends Component {
|
||||
render() {
|
||||
const {className, cssModule, dataBox, ...attributes} = this.props;
|
||||
|
||||
// demo purposes only
|
||||
const data = dataBox();
|
||||
const variant = data.variant;
|
||||
|
||||
if (!variant || ['facebook', 'twitter', 'linkedin', 'google-plus'].indexOf(variant) < 0) {
|
||||
return ( null );
|
||||
}
|
||||
|
||||
const icon = "fa fa-" + variant;
|
||||
const keys = Object.keys(data);
|
||||
const vals = Object.values(data);
|
||||
|
||||
const classes = mapToCssModules(classNames("social-box", className, variant), cssModule);
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<i className={icon}></i>
|
||||
<ul>
|
||||
<li>
|
||||
<strong>{vals[1]}</strong>
|
||||
<span>{keys[1]}</span>
|
||||
</li>
|
||||
<li>
|
||||
<strong>{vals[2]}</strong>
|
||||
<span>{keys[2]}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Widget03.propTypes = propTypes;
|
||||
Widget03.defaultProps = defaultProps;
|
||||
|
||||
export default Widget03;
|
||||
@ -1,63 +0,0 @@
|
||||
import React, {Component} from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import {Card, CardBody, Progress} from 'reactstrap';
|
||||
import classNames from 'classnames';
|
||||
import {mapToCssModules} from 'reactstrap/lib/utils';
|
||||
|
||||
const propTypes = {
|
||||
header: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
color: PropTypes.string,
|
||||
value: PropTypes.string,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
cssModule: PropTypes.object,
|
||||
invert: PropTypes.bool
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
header: '87.500',
|
||||
icon: "icon-people",
|
||||
color: 'info',
|
||||
value: "25",
|
||||
children: "Visitors",
|
||||
invert: false
|
||||
};
|
||||
|
||||
class Widget04 extends Component {
|
||||
render() {
|
||||
const {className, cssModule, header, icon, color, value, children, invert, ...attributes} = this.props;
|
||||
|
||||
// demo purposes only
|
||||
const progress = {style: "", color: color, value: value};
|
||||
const card = {style: "", bgColor: "", icon: icon};
|
||||
|
||||
if (invert) {
|
||||
progress.style = "progress-white";
|
||||
progress.color = "";
|
||||
card.style = "text-white";
|
||||
card.bgColor = 'bg-' + color;
|
||||
}
|
||||
|
||||
const classes = mapToCssModules(classNames(className, card.style, card.bgColor), cssModule);
|
||||
progress.style = classNames("progress-xs mt-3 mb-0", progress.style);
|
||||
|
||||
return (
|
||||
<Card className={ classes } {...attributes}>
|
||||
<CardBody>
|
||||
<div className="h1 text-muted text-right mb-2">
|
||||
<i className={ card.icon }></i>
|
||||
</div>
|
||||
<div className="h4 mb-0">{ header }</div>
|
||||
<small className="text-muted text-uppercase font-weight-bold">{ children }</small>
|
||||
<Progress className={ progress.style } color={ progress.color } value={ progress.value }/>
|
||||
</CardBody>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Widget04.propTypes = propTypes;
|
||||
Widget04.defaultProps = defaultProps;
|
||||
|
||||
export default Widget04;
|
||||
@ -1,112 +0,0 @@
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const CopyWebpackPlugin = require('copy-webpack-plugin');
|
||||
|
||||
const extractCSS = new ExtractTextPlugin('[name].fonts.css');
|
||||
const extractSCSS = new ExtractTextPlugin('[name].styles.css');
|
||||
|
||||
const BUILD_DIR = path.resolve(__dirname, 'build');
|
||||
const SRC_DIR = path.resolve(__dirname, 'src');
|
||||
|
||||
console.log('BUILD_DIR', BUILD_DIR);
|
||||
console.log('SRC_DIR', SRC_DIR);
|
||||
|
||||
module.exports = (env = {}) => {
|
||||
return {
|
||||
entry: {
|
||||
index: [SRC_DIR + '/index.js']
|
||||
},
|
||||
output: {
|
||||
path: BUILD_DIR,
|
||||
filename: '[name].bundle.js'
|
||||
},
|
||||
// watch: true,
|
||||
devtool: env.prod ? 'source-map' : 'cheap-module-eval-source-map',
|
||||
devServer: {
|
||||
contentBase: BUILD_DIR,
|
||||
// port: 9001,
|
||||
compress: true,
|
||||
hot: true,
|
||||
open: true
|
||||
},
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.(js|jsx)$/,
|
||||
exclude: /node_modules/,
|
||||
use: {
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
cacheDirectory: true,
|
||||
presets: ['react', 'env']
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'html-loader'
|
||||
},
|
||||
{
|
||||
test: /\.(scss)$/,
|
||||
use: ['css-hot-loader'].concat(extractSCSS.extract({
|
||||
fallback: 'style-loader',
|
||||
use: [
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {alias: {'../img': '../public/img'}}
|
||||
},
|
||||
{
|
||||
loader: 'sass-loader'
|
||||
}
|
||||
]
|
||||
}))
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: extractCSS.extract({
|
||||
fallback: 'style-loader',
|
||||
use: 'css-loader'
|
||||
})
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpg|jpeg|gif|ico)$/,
|
||||
use: [
|
||||
{
|
||||
// loader: 'url-loader'
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: './img/[name].[hash].[ext]'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'file-loader',
|
||||
options: {
|
||||
name: './fonts/[name].[hash].[ext]'
|
||||
}
|
||||
}]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.optimize.UglifyJsPlugin({sourceMap: true}),
|
||||
new webpack.NamedModulesPlugin(),
|
||||
extractCSS,
|
||||
extractSCSS,
|
||||
new HtmlWebpackPlugin(
|
||||
{
|
||||
inject: true,
|
||||
template: './public/index.html'
|
||||
}
|
||||
),
|
||||
new CopyWebpackPlugin([
|
||||
{from: './public/img', to: 'img'}
|
||||
],
|
||||
{copyUnmodified: false}
|
||||
)
|
||||
]
|
||||
}
|
||||
};
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"presets": [
|
||||
["react"], ["env"]
|
||||
],
|
||||
"plugins": ["transform-object-rest-spread"]
|
||||
}
|
||||
19
React_Starter/.gitignore
vendored
19
React_Starter/.gitignore
vendored
@ -1,19 +0,0 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# dependencies
|
||||
node_modules
|
||||
package-lock.json
|
||||
|
||||
# testing
|
||||
coverage
|
||||
|
||||
# production
|
||||
build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
.env
|
||||
.idea
|
||||
npm-debug.log
|
||||
compilation-stats.json
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,57 +0,0 @@
|
||||
{
|
||||
"name": "@coreui/react",
|
||||
"version": "1.0.10",
|
||||
"description": "Open Source Bootstrap Admin Template",
|
||||
"author": "Łukasz Holeczek",
|
||||
"homepage": "http://coreui.io",
|
||||
"copyright": "Copyright 2018 creativeLabs Łukasz Holeczek",
|
||||
"license": "MIT",
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"babel-core": "6.26.0",
|
||||
"babel-loader": "7.1.2",
|
||||
"babel-plugin-transform-object-rest-spread": "6.26.0",
|
||||
"babel-preset-env": "1.6.1",
|
||||
"babel-preset-react": "6.24.1",
|
||||
"copy-webpack-plugin": "4.3.1",
|
||||
"css-hot-loader": "1.3.6",
|
||||
"css-loader": "0.28.9",
|
||||
"extract-text-webpack-plugin": "3.0.2",
|
||||
"file-loader": "1.1.6",
|
||||
"html-loader": "0.5.5",
|
||||
"html-webpack-plugin": "2.30.1",
|
||||
"node-sass": "4.7.2",
|
||||
"rimraf": "2.6.2",
|
||||
"sass-loader": "6.0.6",
|
||||
"source-list-map": "2.0.0",
|
||||
"style-loader": "0.20.1",
|
||||
"uglify-js": "3.3.9",
|
||||
"url-loader": "0.6.2",
|
||||
"webpack": "3.10.0",
|
||||
"webpack-dev-server": "2.11.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "4.0.0",
|
||||
"chart.js": "2.7.1",
|
||||
"flag-icon-css": "2.9.0",
|
||||
"font-awesome": "4.7.0",
|
||||
"history": "4.7.2",
|
||||
"react": "16.2.0",
|
||||
"react-chartjs-2": "2.7.0",
|
||||
"react-dom": "16.2.0",
|
||||
"react-router-dom": "4.2.2",
|
||||
"react-transition-group": "2.2.1",
|
||||
"reactstrap": "5.0.0-beta",
|
||||
"simple-line-icons": "2.4.1"
|
||||
},
|
||||
"scripts": {
|
||||
"dev": "webpack -d --progress --watch --profile --json > compilation-stats.json --env.dev",
|
||||
"start": "webpack-dev-server --progress --color --inline --env.dev",
|
||||
"build": "webpack -p --progress --env.prod",
|
||||
"clean": "rimraf ./build"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">= 8.9.4",
|
||||
"npm": ">= 5.6.0"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 24 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@ -1,55 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<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="description" content="CoreUI - Open Source Bootstrap Admin Template">
|
||||
<meta name="author" content="Łukasz Holeczek">
|
||||
<meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,AngularJS,Angular,Angular2,Angular 2,Angular4,Angular 4,jQuery,CSS,HTML,RWD,Dashboard,React,React.js,Vue,Vue.js">
|
||||
<link rel="shortcut icon" href="img/favicon.png">
|
||||
<title>CoreUI - Open Source Bootstrap Admin Template</title>
|
||||
</head>
|
||||
|
||||
<!-- BODY options, add following classes to body to change options
|
||||
|
||||
// Header options
|
||||
1. '.header-fixed' - Fixed Header
|
||||
|
||||
// Brand options
|
||||
1. '.brand-minimized' - Minimized brand (Only symbol)
|
||||
|
||||
// Sidebar options
|
||||
1. '.sidebar-fixed' - Fixed Sidebar
|
||||
2. '.sidebar-hidden' - Hidden Sidebar
|
||||
3. '.sidebar-off-canvas' - Off Canvas Sidebar
|
||||
4. '.sidebar-minimized' - Minimized Sidebar (Only icons)
|
||||
5. '.sidebar-compact' - Compact Sidebar
|
||||
|
||||
// Aside options
|
||||
1. '.aside-menu-fixed' - Fixed Aside Menu
|
||||
2. '.aside-menu-hidden' - Hidden Aside Menu
|
||||
3. '.aside-menu-off-canvas' - Off Canvas Aside Menu
|
||||
|
||||
// Breadcrumb options
|
||||
1. '.breadcrumb-fixed' - Fixed Breadcrumb
|
||||
|
||||
// Footer options
|
||||
1. '.footer-fixed' - Fixed footer
|
||||
|
||||
-->
|
||||
|
||||
<body class="app header-fixed sidebar-fixed aside-menu-fixed aside-menu-hidden">
|
||||
<div id="root"></div>
|
||||
<!--
|
||||
This HTML file is a template.
|
||||
If you open it directly in the browser, you will see an empty page.
|
||||
|
||||
You can add webfonts, meta tags, or analytics to this file.
|
||||
The build step will place the bundled scripts into the <body> tag.
|
||||
|
||||
To begin the development, run `npm start`.
|
||||
To create a production bundle, use `npm run build`.
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
@ -1,130 +0,0 @@
|
||||
// Bootstrap overrides
|
||||
|
||||
//
|
||||
// Color system
|
||||
//
|
||||
|
||||
$white: #fff;
|
||||
$gray-100: #f0f3f5;
|
||||
$gray-200: #c2cfd6;
|
||||
$gray-300: #a4b7c1;
|
||||
$gray-400: #869fac;
|
||||
$gray-500: #678898;
|
||||
$gray-600: #536c79;
|
||||
$gray-700: #3e515b;
|
||||
$gray-800: #29363d;
|
||||
$gray-900: #151b1e;
|
||||
$black: #000 !default;
|
||||
|
||||
$blue: #20a8d8;
|
||||
$indigo: #6610f2 !default;
|
||||
$purple: #6f42c1 !default;
|
||||
$pink: #e83e8c !default;
|
||||
$red: #f86c6b;
|
||||
$orange: #f8cb00;
|
||||
$yellow: #ffc107 !default;
|
||||
$green: #4dbd74;
|
||||
$teal: #20c997 !default;
|
||||
$cyan: #63c2de;
|
||||
|
||||
$colors: (
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
white: $white,
|
||||
gray: $gray-600,
|
||||
gray-dark: $gray-800
|
||||
);
|
||||
|
||||
$theme-colors: (
|
||||
primary: $blue,
|
||||
secondary: $gray-300,
|
||||
success: $green,
|
||||
info: $cyan,
|
||||
warning: $yellow,
|
||||
danger: $red,
|
||||
light: $gray-100,
|
||||
dark: $gray-800,
|
||||
|
||||
blue: $blue,
|
||||
indigo: $indigo,
|
||||
purple: $purple,
|
||||
pink: $pink,
|
||||
red: $red,
|
||||
orange: $orange,
|
||||
yellow: $yellow,
|
||||
green: $green,
|
||||
teal: $teal,
|
||||
cyan: $cyan,
|
||||
|
||||
gray-100: $gray-100,
|
||||
gray-200: $gray-200,
|
||||
gray-300: $gray-300,
|
||||
gray-400: $gray-400,
|
||||
gray-500: $gray-500,
|
||||
gray-600: $gray-600,
|
||||
gray-700: $gray-700,
|
||||
gray-800: $gray-800,
|
||||
gray-900: $gray-900
|
||||
);
|
||||
|
||||
// Options
|
||||
//
|
||||
// Quickly modify global styling by enabling or disabling optional features.
|
||||
|
||||
$enable-transitions: true;
|
||||
$enable-rounded: false;
|
||||
|
||||
// Body
|
||||
//
|
||||
// Settings for the `<body>` element.
|
||||
|
||||
$body-bg: #e4e5e6;
|
||||
|
||||
// Typography
|
||||
//
|
||||
// Font, line-height, and color for body text, headings, and more.
|
||||
|
||||
$font-size-base: 0.875rem;
|
||||
|
||||
// Breadcrumbs
|
||||
|
||||
$breadcrumb-bg: #fff;
|
||||
$breadcrumb-margin-bottom: 1.5rem;
|
||||
|
||||
// Cards
|
||||
|
||||
$card-border-color: $gray-200;
|
||||
$card-cap-bg: $gray-100;
|
||||
|
||||
// Dropdowns
|
||||
|
||||
$dropdown-padding-y: 0;
|
||||
$dropdown-border-color: $gray-200;
|
||||
$dropdown-divider-bg: $gray-100;
|
||||
|
||||
// Buttons
|
||||
|
||||
$btn-secondary-border: $gray-300;
|
||||
|
||||
// Progress bars
|
||||
|
||||
$progress-bg: $gray-100;
|
||||
|
||||
// Tables
|
||||
|
||||
$table-bg-accent: $gray-100;
|
||||
$table-bg-hover: $gray-100;
|
||||
|
||||
// Forms
|
||||
|
||||
$input-group-addon-bg: $gray-100;
|
||||
$input-border-color: $gray-200;
|
||||
$input-group-addon-border-color: $gray-200;
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user