v1.0.0
This commit is contained in:
Łukasz Holeczek
parent
7ca12d7779
commit
c5cc339531
@ -1,23 +1,23 @@
|
|||||||
## Changelog [react](./REACT.md) version
|
## Changelog [react](./REACT.md) version
|
||||||
|
|
||||||
### 2017.08.24
|
##### 2017.08.24
|
||||||
- webpack.config env.prod
|
- webpack.config env.prod
|
||||||
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
||||||
- callout.scss .chart-wrapper hotfix (full)
|
- callout.scss .chart-wrapper hotfix (full)
|
||||||
|
|
||||||
### 2017.08.11
|
##### 2017.08.11
|
||||||
- Bootstrap 4 beta
|
- Bootstrap 4 beta
|
||||||
- Dashboard component (full):
|
- Dashboard component (full):
|
||||||
- line chart for social box
|
- line chart for social box
|
||||||
- sparkline chart for callout
|
- sparkline chart for callout
|
||||||
|
|
||||||
### 2017.08.01
|
##### 2017.08.01
|
||||||
- Sidebar component:
|
- Sidebar component:
|
||||||
- title item with optional wrapper and class (_nav.js)
|
- title item with optional wrapper and class (_nav.js)
|
||||||
- nav link item with optional badge
|
- nav link item with optional badge
|
||||||
- code refactoring
|
- code refactoring
|
||||||
|
|
||||||
### 2017.07.31
|
##### 2017.07.31
|
||||||
- moved to [reactstrap](https://reactstrap.github.io/)
|
- moved to [reactstrap](https://reactstrap.github.io/)
|
||||||
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
||||||
- data driven Sidebar component (_nav.js)
|
- data driven Sidebar component (_nav.js)
|
||||||
|
|||||||
24
CHANGELOG.md~Stashed changes
Normal file
24
CHANGELOG.md~Stashed changes
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
## Changelog [react](./REACT.md) version
|
||||||
|
|
||||||
|
##### 2017.08.24
|
||||||
|
- webpack.config env.prod
|
||||||
|
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
||||||
|
- callout.scss .chart-wrapper hotfix (full)
|
||||||
|
|
||||||
|
##### 2017.08.11
|
||||||
|
- Bootstrap 4 beta
|
||||||
|
- Dashboard component (full):
|
||||||
|
- line chart for social box
|
||||||
|
- sparkline chart for callout
|
||||||
|
|
||||||
|
##### 2017.08.01
|
||||||
|
- Sidebar component:
|
||||||
|
- title item with optional wrapper and class (_nav.js)
|
||||||
|
- nav link item with optional badge
|
||||||
|
- code refactoring
|
||||||
|
|
||||||
|
##### 2017.07.31
|
||||||
|
- moved to [reactstrap](https://reactstrap.github.io/)
|
||||||
|
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
||||||
|
- data driven Sidebar component (_nav.js)
|
||||||
|
|
||||||
27
REACT.md
27
REACT.md
@ -1,36 +1,29 @@
|
|||||||
# React version
|
# React version
|
||||||
|
|
||||||
## Intro
|
## Intro
|
||||||
|
|
||||||
It uses Sass (with .scss). The style is loaded at the component level.
|
It uses Sass (with .scss). The style is loaded at the component level.
|
||||||
|
|
||||||
Dependencies can be handled by **npm**.
|
Dependencies can be handled by **npm**.
|
||||||
|
|
||||||
## Directories
|
## Directories
|
||||||
|
|
||||||
```
|
```
|
||||||
src (js|jsx source)
|
React_Full_Project/
|
||||||
scss (scss source)
|
├── src/ (js|jsx source)
|
||||||
public (html template)
|
├── scss/ (scss source)
|
||||||
public/img (images)
|
├── public/ (html template)
|
||||||
|
├── img/ (images)
|
||||||
```
|
```
|
||||||
|
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
**npm i** - to install dependencies
|
**npm i** - to install dependencies
|
||||||
|
|
||||||
## Sctipts
|
## Sctipts
|
||||||
|
**npm start** for developing (it runs webpack-dev-server)
|
||||||
**npm start** for developing (it runs webpack-dev-server)
|
**npm run build** to run a dev build
|
||||||
|
**npm run clean** to clean build dir
|
||||||
**npm run build** to run a dev build
|
**npm run dev** to run a dev build with watching filesystem for changes
|
||||||
|
|
||||||
**npm run clean** to clean build dir
|
|
||||||
|
|
||||||
**npm run dev** to run a dev build with watching filesystem for changes
|
|
||||||
|
|
||||||
|
|
||||||
## See also
|
## See also
|
||||||
|
|
||||||
[Changelog](./CHANGELOG.md)
|
[Changelog](./CHANGELOG.md)
|
||||||
[Readme](./README.md)
|
[Readme](./README.md)
|
||||||
29
REACT.md~Stashed changes
Normal file
29
REACT.md~Stashed changes
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
# React version
|
||||||
|
|
||||||
|
## Intro
|
||||||
|
It uses Sass (with .scss). The style is loaded at the component level.
|
||||||
|
|
||||||
|
Dependencies can be handled by **npm**.
|
||||||
|
|
||||||
|
## Directories
|
||||||
|
```
|
||||||
|
React_Full_Project/
|
||||||
|
├── src/ (js|jsx source)
|
||||||
|
├── scss/ (scss source)
|
||||||
|
├── public/ (html template)
|
||||||
|
├── img/ (images)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
**npm i** - to install dependencies
|
||||||
|
|
||||||
|
## Sctipts
|
||||||
|
**npm start** for developing (it runs webpack-dev-server)
|
||||||
|
**npm run build** to run a dev build
|
||||||
|
**npm run clean** to clean build dir
|
||||||
|
**npm run dev** to run a dev build with watching filesystem for changes
|
||||||
|
|
||||||
|
## See also
|
||||||
|
|
||||||
|
[Changelog](./CHANGELOG.md)
|
||||||
|
[Readme](./README.md)
|
||||||
36
REACT.md~Updated upstream
Normal file
36
REACT.md~Updated upstream
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
# React version
|
||||||
|
|
||||||
|
## Intro
|
||||||
|
|
||||||
|
It uses Sass (with .scss). The style is loaded at the component level.
|
||||||
|
|
||||||
|
Dependencies can be handled by **npm**.
|
||||||
|
|
||||||
|
## Directories
|
||||||
|
|
||||||
|
```
|
||||||
|
src (js|jsx source)
|
||||||
|
scss (scss source)
|
||||||
|
public (html template)
|
||||||
|
public/img (images)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
**npm i** - to install dependencies
|
||||||
|
|
||||||
|
## Sctipts
|
||||||
|
|
||||||
|
**npm start** for developing (it runs webpack-dev-server)
|
||||||
|
|
||||||
|
**npm run build** to run a dev build
|
||||||
|
|
||||||
|
**npm run clean** to clean build dir
|
||||||
|
|
||||||
|
**npm run dev** to run a dev build with watching filesystem for changes
|
||||||
|
|
||||||
|
|
||||||
|
## See also
|
||||||
|
|
||||||
|
[Changelog](./CHANGELOG.md)
|
||||||
|
[Readme](./README.md)
|
||||||
@ -12,11 +12,11 @@ Please help us on [Product Hunt](https://www.producthunt.com/posts/coreui-open-s
|
|||||||
|
|
||||||
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)
|
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 Open Source React & Bootstrap Admin Template. 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 the CoreUI consists bunch of unique features and over 1000 high quality icons.
|
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 based on Bootstrap 4 and offers 6 versions: HTML5, AJAX, AngularJS, Angular 2, React.js & Vue.js.
|
CoreUI is based on Bootstrap 4 and offers 6 versions: [HTML5 AJAX](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [HTML5 Static](https://github.com/mrholek/CoreUI-Free-Bootstrap-Admin-Template), [AngularJS](https://github.com/mrholek/CoreUI-AngularJS), [Angular 2+](https://github.com/mrholek/CoreUI-Angular), [React.js](https://github.com/mrholek/CoreUI-React) & [Vue.js](https://github.com/mrholek/CoreUI-Vue).
|
||||||
|
|
||||||
CoreUI is meant to be the UX game changer. Pure & transparent code is devoid of redundant components, so the app is light enough to offer ultimate user experience. This means also mobile devices, where the navigation is the same easy and intuitive as in desktop or laptop. CoreUI Layout API lets you customize your project for almost any device – be it Mobile, Web or WebApp – CoreUI covers them all!
|
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)
|
[](http://coreui.io)
|
||||||
|
|
||||||
|
|||||||
24
React_Full_Project/CHANGELOG.md
Normal file
24
React_Full_Project/CHANGELOG.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
## Changelog [react](./REACT.md) version
|
||||||
|
|
||||||
|
### 2017.08.24
|
||||||
|
- webpack.config env.prod
|
||||||
|
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
||||||
|
- callout.scss .chart-wrapper hotfix (full)
|
||||||
|
|
||||||
|
### 2017.08.11
|
||||||
|
- Bootstrap 4 beta
|
||||||
|
- Dashboard component (full):
|
||||||
|
- line chart for social box
|
||||||
|
- sparkline chart for callout
|
||||||
|
|
||||||
|
### 2017.08.01
|
||||||
|
- Sidebar component:
|
||||||
|
- title item with optional wrapper and class (_nav.js)
|
||||||
|
- nav link item with optional badge
|
||||||
|
- code refactoring
|
||||||
|
|
||||||
|
### 2017.07.31
|
||||||
|
- moved to [reactstrap](https://reactstrap.github.io/)
|
||||||
|
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
||||||
|
- data driven Sidebar component (_nav.js)
|
||||||
|
|
||||||
36
React_Full_Project/REACT.md
Normal file
36
React_Full_Project/REACT.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
# React version
|
||||||
|
|
||||||
|
## Intro
|
||||||
|
|
||||||
|
It uses Sass (with .scss). The style is loaded at the component level.
|
||||||
|
|
||||||
|
Dependencies can be handled by **npm**.
|
||||||
|
|
||||||
|
## Directories
|
||||||
|
|
||||||
|
```
|
||||||
|
src (js|jsx source)
|
||||||
|
scss (scss source)
|
||||||
|
public (html template)
|
||||||
|
public/img (images)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
**npm i** - to install dependencies
|
||||||
|
|
||||||
|
## Sctipts
|
||||||
|
|
||||||
|
**npm start** for developing (it runs webpack-dev-server)
|
||||||
|
|
||||||
|
**npm run build** to run a dev build
|
||||||
|
|
||||||
|
**npm run clean** to clean build dir
|
||||||
|
|
||||||
|
**npm run dev** to run a dev build with watching filesystem for changes
|
||||||
|
|
||||||
|
|
||||||
|
## See also
|
||||||
|
|
||||||
|
[Changelog](./CHANGELOG.md)
|
||||||
|
[Readme](./README.md)
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "coreui-react",
|
"name": "coreui-react",
|
||||||
"version": "1.0.0-alpha.6",
|
"version": "1.0.0",
|
||||||
"description": "CoreUI React Open Source Bootstrap Admin Template",
|
"description": "CoreUI React Open Source Bootstrap Admin Template",
|
||||||
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
||||||
"url": "http://coreui.io",
|
"url": "http://coreui.io",
|
||||||
@ -15,32 +15,32 @@
|
|||||||
"babel-preset-env": "^1.6.0",
|
"babel-preset-env": "^1.6.0",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"copy-webpack-plugin": "^4.0.1",
|
"copy-webpack-plugin": "^4.0.1",
|
||||||
"css-hot-loader": "^1.3.0",
|
"css-hot-loader": "^1.3.1",
|
||||||
"css-loader": "^0.28.5",
|
"css-loader": "^0.28.7",
|
||||||
"extract-text-webpack-plugin": "^3.0.0",
|
"extract-text-webpack-plugin": "^3.0.0",
|
||||||
"file-loader": "^0.11.2",
|
"file-loader": "^0.11.2",
|
||||||
"html-loader": "^0.5.1",
|
"html-loader": "^0.5.1",
|
||||||
"html-webpack-plugin": "^2.30.1",
|
"html-webpack-plugin": "^2.30.1",
|
||||||
"node-sass": "^4.5.3",
|
"node-sass": "^4.5.3",
|
||||||
"rimraf": "^2.6.1",
|
"rimraf": "^2.6.2",
|
||||||
"sass-loader": "^6.0.6",
|
"sass-loader": "^6.0.6",
|
||||||
"source-list-map": "^2.0.0",
|
"source-list-map": "^2.0.0",
|
||||||
"style-loader": "^0.18.2",
|
"style-loader": "^0.18.2",
|
||||||
"uglify-js": "^3.0.28",
|
"uglify-js": "^3.1.1",
|
||||||
"url-loader": "^0.5.9",
|
"url-loader": "^0.5.9",
|
||||||
"webpack": "^3.5.5",
|
"webpack": "^3.6.0",
|
||||||
"webpack-dev-server": "^2.7.1"
|
"webpack-dev-server": "^2.8.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.0.0-beta",
|
"bootstrap": "^4.0.0-beta",
|
||||||
"chart.js": "2.6.0",
|
"chart.js": "2.7.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"history": "4.7.2",
|
"history": "4.7.2",
|
||||||
"react": "^15.6.1",
|
"react": "^15.6.1",
|
||||||
"react-chartjs-2": "2.6.1",
|
"react-chartjs-2": "2.6.2",
|
||||||
"react-dom": "^15.6.1",
|
"react-dom": "^15.6.1",
|
||||||
"react-router-dom": "4.2.2",
|
"react-router-dom": "4.2.2",
|
||||||
"react-transition-group": "^1.2.0",
|
"react-transition-group": "^2.2.0",
|
||||||
"reactstrap": "^4.8.0",
|
"reactstrap": "^4.8.0",
|
||||||
"simple-line-icons": "^2.4.1"
|
"simple-line-icons": "^2.4.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 1.5 * $spacer;
|
margin: $breadcrumb-margin;
|
||||||
|
|
||||||
@include borders($breadcrumb-borders);
|
@include borders($breadcrumb-borders);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,10 +11,10 @@
|
|||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 18px;
|
top: 10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
float: right;
|
float: right;
|
||||||
width: 60%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
7
React_Full_Project/scss/core/_dropdown-menu-right.scss
Normal file
7
React_Full_Project/scss/core/_dropdown-menu-right.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
// Temp fix for reactstrap
|
||||||
|
.show {
|
||||||
|
> .dropdown-menu-right {
|
||||||
|
right: 0;
|
||||||
|
left: auto; // Reset the default from `.dropdown-menu`
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -11,8 +11,8 @@
|
|||||||
app-dashboard,
|
app-dashboard,
|
||||||
app-root {
|
app-root {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header {
|
.app-header {
|
||||||
@ -26,12 +26,12 @@ app-root {
|
|||||||
.app-body {
|
.app-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-grow: 1;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@ -65,22 +65,22 @@ app-root {
|
|||||||
// Sidebar
|
// Sidebar
|
||||||
//
|
//
|
||||||
.sidebar-hidden {
|
.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-width;
|
margin-left: - $sidebar-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-fixed {
|
.sidebar-fixed {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: $zindex-sticky - 1;
|
||||||
width: $sidebar-width;
|
width: $sidebar-width;
|
||||||
height: 100%;
|
height: calc(100vh - #{$navbar-height});
|
||||||
|
// margin-top: - $navbar-height;
|
||||||
|
|
||||||
.sidebar-nav {
|
// .sidebar-nav {
|
||||||
height: calc(100vh - #{$navbar-height});
|
// height: calc(100vh - #{$navbar-height});
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
@ -88,7 +88,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -99,12 +98,7 @@ app-root {
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
height: 100%;
|
height: calc(100vh - #{$navbar-height});
|
||||||
|
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
height: calc(100vh - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,14 +109,12 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-compact-width;
|
margin-left: - $sidebar-compact-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-fixed {
|
&.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: $sidebar-compact-width;
|
margin-left: $sidebar-compact-width;
|
||||||
}
|
}
|
||||||
@ -132,7 +124,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -143,17 +134,20 @@ app-root {
|
|||||||
.sidebar-minimized {
|
.sidebar-minimized {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
flex: 0 0 $sidebar-minimized-width;
|
flex: 0 0 $sidebar-minimized-width;
|
||||||
|
.sidebar-header,
|
||||||
|
.sidebar-form,
|
||||||
|
.sidebar-footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-minimized-width;
|
margin-left: - $sidebar-minimized-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-fixed {
|
&.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: $sidebar-minimized-width;
|
margin-left: $sidebar-minimized-width;
|
||||||
}
|
}
|
||||||
@ -163,7 +157,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -176,14 +169,12 @@ app-root {
|
|||||||
// Aside Menu
|
// Aside Menu
|
||||||
//
|
//
|
||||||
.aside-menu-hidden {
|
.aside-menu-hidden {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
margin-right: - $aside-menu-width;
|
margin-right: - $aside-menu-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside-menu-fixed {
|
.aside-menu-fixed {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -199,7 +190,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.aside-menu-hidden {
|
&.aside-menu-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
@ -223,7 +213,6 @@ app-root {
|
|||||||
// Breadcrumb
|
// Breadcrumb
|
||||||
//
|
//
|
||||||
.breadcrumb-fixed {
|
.breadcrumb-fixed {
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||||
padding-top: $breadcrumb-height;
|
padding-top: $breadcrumb-height;
|
||||||
@ -283,7 +272,6 @@ app-root {
|
|||||||
// Footer
|
// Footer
|
||||||
//
|
//
|
||||||
.footer-fixed {
|
.footer-fixed {
|
||||||
|
|
||||||
.app-footer {
|
.app-footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -306,6 +294,9 @@ app-root {
|
|||||||
.aside-menu {
|
.aside-menu {
|
||||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
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 {
|
.breadcrumb {
|
||||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||||
}
|
}
|
||||||
@ -315,12 +306,13 @@ app-root {
|
|||||||
//
|
//
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
|
.app-header.navbar {
|
||||||
.app-header {
|
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
z-index: $zindex-sticky;
|
z-index: $zindex-sticky;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: $navbar-brand-bg;
|
||||||
|
@include borders($navbar-brand-border);
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||||
@ -343,6 +335,7 @@ app-root {
|
|||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: $zindex-sticky - 1;
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-left: - $mobile-sidebar-width;
|
margin-left: - $mobile-sidebar-width;
|
||||||
@ -368,7 +361,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-mobile-show {
|
.sidebar-mobile-show {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.app-header.navbar {
|
.app-header.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: row;
|
|
||||||
height: $navbar-height;
|
height: $navbar-height;
|
||||||
|
flex-direction: row;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $navbar-bg;
|
background-color: $navbar-bg;
|
||||||
|
|||||||
@ -44,20 +44,17 @@
|
|||||||
// Sidebar
|
// Sidebar
|
||||||
//
|
//
|
||||||
.sidebar-hidden {
|
.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-right: - $sidebar-width;
|
margin-right: - $sidebar-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-fixed {
|
.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-right: $sidebar-width;
|
margin-right: $sidebar-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
@ -70,20 +67,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-minimized-width;
|
margin-right: - $sidebar-minimized-width;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-fixed {
|
&.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: $sidebar-minimized-width;
|
margin-right: $sidebar-minimized-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -95,15 +90,13 @@
|
|||||||
// Aside Menu
|
// Aside Menu
|
||||||
//
|
//
|
||||||
.aside-menu-hidden {
|
.aside-menu-hidden {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
// margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: - $aside-menu-width;
|
margin-left: - $aside-menu-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside-menu-fixed {
|
.aside-menu-fixed {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
right: auto;
|
right: auto;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -115,7 +108,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.aside-menu-hidden {
|
&.aside-menu-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -138,15 +130,12 @@
|
|||||||
// Sidebar Menu
|
// Sidebar Menu
|
||||||
.sidebar {
|
.sidebar {
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
direction: ltr;
|
|
||||||
* {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
.nav {
|
.nav {
|
||||||
.nav-item {
|
.nav-item {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
[class^="icon-"], [class*=" icon-"] {
|
direction: rtl;
|
||||||
margin-right: -4px;
|
i {
|
||||||
|
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||||
}
|
}
|
||||||
.badge {
|
.badge {
|
||||||
float: left;
|
float: left;
|
||||||
@ -158,13 +147,14 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
right: auto !important;
|
right: auto !important;
|
||||||
left: $sidebar-nav-link-padding-x;
|
left: $sidebar-nav-link-padding-x;
|
||||||
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.nav-dropdown {
|
&.nav-dropdown {
|
||||||
&.open {
|
&.open {
|
||||||
> .nav-link.nav-dropdown-toggle::before {
|
> .nav-link.nav-dropdown-toggle::before {
|
||||||
transform: rotate(90deg);
|
transform: rotate(270deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -173,6 +163,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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
|
||||||
.horizontal-bars {
|
.horizontal-bars {
|
||||||
|
|
||||||
@ -249,6 +263,12 @@
|
|||||||
border: 0 solid $border-color;
|
border: 0 solid $border-color;
|
||||||
border-right-width: .25rem;
|
border-right-width: .25rem;
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
&.callout-#{$color} {
|
||||||
|
border-right-color: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
left: 0;
|
left: 0;
|
||||||
float: left;
|
float: left;
|
||||||
@ -258,10 +278,4 @@
|
|||||||
.callout-default {
|
.callout-default {
|
||||||
border-right-color: $text-muted;
|
border-right-color: $text-muted;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
&.callout-#{$color} {
|
|
||||||
border-right-color: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
// scss-lint:disable NestingDepth, SelectorDepth
|
// scss-lint:disable NestingDepth, SelectorDepth
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
padding: $sidebar-padding;
|
padding: $sidebar-padding;
|
||||||
overflow: hidden;
|
|
||||||
color: $sidebar-color;
|
color: $sidebar-color;
|
||||||
background: $sidebar-bg;
|
background: $sidebar-bg;
|
||||||
@include borders($sidebar-borders);
|
@include borders($sidebar-borders);
|
||||||
@ -24,31 +25,47 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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 {
|
.sidebar-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// &::-webkit-scrollbar-button { }
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
background-color: lighten($sidebar-bg, 5%);
|
background-color: lighten($sidebar-bg, 5%);
|
||||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// &::-webkit-scrollbar-track-piece { }
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: darken($sidebar-bg, 10%);
|
background-color: darken($sidebar-bg, 10%);
|
||||||
@ -57,183 +74,170 @@
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px 2px;
|
border-width: 1px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// &::-webkit-scrollbar-corner { }
|
|
||||||
|
|
||||||
// &::-webkit-resizer { }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $sidebar-nav-title-color;
|
color: $sidebar-nav-title-color;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.nav-divider, .divider {
|
||||||
height: 10px;
|
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 {
|
.nav-item {
|
||||||
position: relative;
|
padding: 0;
|
||||||
margin: 0;
|
list-style: none;
|
||||||
transition: background .3s ease-in-out;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
.nav-link {
|
||||||
max-height: 0;
|
display: block;
|
||||||
padding: 0;
|
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||||
margin: 0;
|
color: $sidebar-nav-link-color;
|
||||||
overflow-y: hidden;
|
text-decoration: none;
|
||||||
transition: max-height .3s ease-in-out;
|
background: $sidebar-nav-link-bg;
|
||||||
|
@include borders($sidebar-nav-link-borders);
|
||||||
|
@if $enable-sidebar-nav-rounded {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
i {
|
||||||
padding: 0;
|
display: inline-block;
|
||||||
list-style: none;
|
width: 20px;
|
||||||
}
|
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||||
}
|
font-size: 14px;
|
||||||
|
color: $sidebar-nav-link-icon-color;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-link {
|
.badge {
|
||||||
display: block;
|
float: right;
|
||||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
margin-top: 2px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&.active {
|
||||||
color: $sidebar-nav-link-hover-color !important;
|
color: $sidebar-nav-link-active-color;
|
||||||
background: $sidebar-nav-link-hover-bg !important;
|
background: $sidebar-nav-link-active-bg;
|
||||||
@include borders($sidebar-nav-link-hover-borders);
|
@include borders($sidebar-nav-link-active-borders);
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: $sidebar-nav-link-hover-icon-color;
|
color: $sidebar-nav-link-active-icon-color;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icon-"], [class*=" icon-"] {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: -4px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
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;
|
|
||||||
// margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
|
|
||||||
right: $sidebar-nav-link-padding-x;
|
|
||||||
display: block;
|
|
||||||
width: ($font-size-base);
|
|
||||||
height: ($font-size-base);
|
|
||||||
padding: 0;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
line-height: ($font-size-base * 3 / 4);
|
|
||||||
text-align: center;
|
|
||||||
content: "\2039";
|
|
||||||
transition: .3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown {
|
|
||||||
&.open {
|
|
||||||
background: $sidebar-nav-dropdown-bg;
|
|
||||||
@include borders($sidebar-nav-dropdown-borders);
|
|
||||||
@if $enable-sidebar-nav-rounded {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
> ul, > ol {
|
|
||||||
// display: inline;
|
|
||||||
max-height: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.nt {
|
|
||||||
transition: 0s !important;
|
|
||||||
> ul, > ol {
|
|
||||||
transition: 0s !important;
|
|
||||||
}
|
|
||||||
.nav-link {
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
transition: 0s !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $sidebar-nav-link-hover-color !important;
|
||||||
|
background: $sidebar-nav-link-hover-bg !important;
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -283,6 +287,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Minimized Sidebar
|
||||||
.sidebar-minimized {
|
.sidebar-minimized {
|
||||||
.hidden-cn {
|
.hidden-cn {
|
||||||
display: none;
|
display: none;
|
||||||
@ -290,10 +295,6 @@
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||||
@ -301,122 +302,94 @@
|
|||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||||
|
}
|
||||||
|
|
||||||
.nav-title, .divider {
|
.nav-divider, .divider,
|
||||||
|
.nav-title,
|
||||||
|
.sidebar-footer,
|
||||||
|
.sidebar-form,
|
||||||
|
.sidebar-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
&:hover {
|
||||||
width: $sidebar-minimized-width;
|
width: $sidebar-width + $sidebar-minimized-width;
|
||||||
overflow: hidden;
|
background: $sidebar-nav-link-hover-bg;
|
||||||
border-left: 0 !important;
|
|
||||||
|
|
||||||
ul {
|
.badge {
|
||||||
background: $sidebar-bg;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.nav-dropdown-toggle::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown-items {
|
||||||
|
.nav-item {
|
||||||
|
width: $sidebar-width;
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
position: relative;
|
width: $sidebar-width;
|
||||||
padding-left: 0;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-left: 0 !important;
|
|
||||||
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
width: $sidebar-minimized-height;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 !important;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
position: absolute;
|
|
||||||
// top: 14px;
|
|
||||||
right: 15px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: $sidebar-width;
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
.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;
|
position: absolute;
|
||||||
left: $sidebar-minimized-width;
|
left: $sidebar-minimized-width;
|
||||||
|
display: inline;
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
width: $sidebar-width - $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown {
|
|
||||||
&.open {
|
|
||||||
background: $sidebar-nav-link-active-bg;
|
|
||||||
> .nav-link i {
|
|
||||||
color: $sidebar-nav-link-active-icon-color;
|
|
||||||
}
|
|
||||||
> ul, > ol {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: $sidebar-width + $sidebar-minimized-width;
|
|
||||||
overflow: visible;
|
|
||||||
background: $sidebar-nav-link-hover-bg;
|
|
||||||
transition: 0s;
|
|
||||||
|
|
||||||
> .nav-link {
|
|
||||||
width: $sidebar-width + $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul, > ol {
|
|
||||||
display: inline;
|
|
||||||
max-height: 10000px;
|
|
||||||
transition: 0s;
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: $sidebar-width;
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
width: $sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown {
|
|
||||||
&.open {
|
|
||||||
> ul, > ol {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,25 +16,12 @@
|
|||||||
|
|
||||||
// Open state for the dropdown
|
// Open state for the dropdown
|
||||||
.open, .show {
|
.open, .show {
|
||||||
// Show the menu
|
|
||||||
> .dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
> .dropdown-menu-right {
|
|
||||||
right: 0;
|
|
||||||
left: auto; // Reset the default from `.dropdown-menu`
|
|
||||||
}
|
|
||||||
// Remove the outline when :focus is triggered
|
// Remove the outline when :focus is triggered
|
||||||
> a {
|
> a {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
|
||||||
//.modal-open .modal {
|
|
||||||
// display: block;
|
|
||||||
//}
|
|
||||||
|
|
||||||
// navbar dropdown fix
|
// navbar dropdown fix
|
||||||
.navbar .dropdown-toggle {
|
.navbar .dropdown-toggle {
|
||||||
@extend .nav-link;
|
@extend .nav-link;
|
||||||
|
|||||||
@ -72,11 +72,23 @@ $sidebar-compact-width: 150px !default;
|
|||||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||||
$sidebar-color: #fff !default;
|
$sidebar-color: #fff !default;
|
||||||
$sidebar-bg: $gray-800 !default;
|
$sidebar-bg: $gray-800 !default;
|
||||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-borders: none !default;
|
$sidebar-borders: none !default;
|
||||||
$mobile-sidebar-width: 220px !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 Navigation
|
||||||
|
|
||||||
$sidebar-nav-color: #fff !default;
|
$sidebar-nav-color: #fff !default;
|
||||||
@ -87,7 +99,7 @@ $sidebar-nav-link-padding-y: .75rem !default;
|
|||||||
$sidebar-nav-link-padding-x: 1rem !default;
|
$sidebar-nav-link-padding-x: 1rem !default;
|
||||||
$sidebar-nav-link-color: #fff !default;
|
$sidebar-nav-link-color: #fff !default;
|
||||||
$sidebar-nav-link-bg: transparent !default;
|
$sidebar-nav-link-bg: transparent !default;
|
||||||
$sidebar-nav-link-icon-color: $text-muted !default;
|
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||||
$sidebar-nav-link-borders: 0 !default;
|
$sidebar-nav-link-borders: 0 !default;
|
||||||
|
|
||||||
$sidebar-nav-link-hover-color: #fff !default;
|
$sidebar-nav-link-hover-color: #fff !default;
|
||||||
@ -103,6 +115,17 @@ $sidebar-nav-link-active-borders: 0 !default;
|
|||||||
$sidebar-nav-dropdown-color: #fff !default;
|
$sidebar-nav-dropdown-color: #fff !default;
|
||||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
||||||
$sidebar-nav-dropdown-borders: 0 !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;
|
||||||
|
|
||||||
// Top Navigation
|
// Top Navigation
|
||||||
|
|
||||||
@ -131,6 +154,7 @@ $top-nav-height: $navbar-height - 15px !default;
|
|||||||
|
|
||||||
// Breadcrumb
|
// Breadcrumb
|
||||||
|
|
||||||
|
$breadcrumb-margin: 0 0 (1.5 * $spacer) 0 !default;
|
||||||
$breadcrumb-borders: (
|
$breadcrumb-borders: (
|
||||||
bottom: (
|
bottom: (
|
||||||
size: 1px,
|
size: 1px,
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* CoreUI - Open Source Bootstrap Admin Template
|
* CoreUI - Open Source Bootstrap Admin Template
|
||||||
* @version v1.0.0-alpha.6
|
* @version v1.0.0
|
||||||
* @link http://coreui.io
|
* @link http://coreui.io
|
||||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||||
* @license MIT
|
* @license MIT
|
||||||
@ -20,14 +20,14 @@
|
|||||||
// Import Bootstrap source files from bower_components
|
// Import Bootstrap source files from bower_components
|
||||||
// @import "bower_components/bootstrap/scss/bootstrap";
|
// @import "bower_components/bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
// Import vendors styles
|
|
||||||
@import "vendors/vendors";
|
|
||||||
|
|
||||||
// Override core variables
|
// Override core variables
|
||||||
@import "core-variables";
|
@import "core-variables";
|
||||||
|
|
||||||
// Import core styles
|
// Import core styles
|
||||||
@import "core/core";
|
@import "core/core";
|
||||||
|
|
||||||
|
// Import vendors styles
|
||||||
|
@import "vendors/vendors";
|
||||||
|
|
||||||
// Custom styles
|
// Custom styles
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|||||||
@ -54,7 +54,7 @@ class Header extends Component {
|
|||||||
<header className="app-header navbar">
|
<header className="app-header navbar">
|
||||||
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
||||||
<NavbarBrand href="#"></NavbarBrand>
|
<NavbarBrand href="#"></NavbarBrand>
|
||||||
<NavbarToggler className="d-md-down-none" onClick={this.sidebarToggle}>☰</NavbarToggler>
|
<NavbarToggler className="d-md-down-none" onClick={this.sidebarMinimize}>☰</NavbarToggler>
|
||||||
<Nav className="d-md-down-none" navbar>
|
<Nav className="d-md-down-none" navbar>
|
||||||
<NavItem className="px-3">
|
<NavItem className="px-3">
|
||||||
<NavLink href="#">Dashboard</NavLink>
|
<NavLink href="#">Dashboard</NavLink>
|
||||||
|
|||||||
@ -2,7 +2,10 @@ import React, {Component} from 'react';
|
|||||||
import {NavLink} from 'react-router-dom';
|
import {NavLink} from 'react-router-dom';
|
||||||
import {Badge, Nav, NavItem} from 'reactstrap';
|
import {Badge, Nav, NavItem} from 'reactstrap';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import nav from './_nav'
|
import nav from './_nav';
|
||||||
|
import SidebarFooter from './../SidebarFooter';
|
||||||
|
import SidebarForm from './../SidebarForm';
|
||||||
|
import SidebarHeader from './../SidebarHeader';
|
||||||
|
|
||||||
class Sidebar extends Component {
|
class Sidebar extends Component {
|
||||||
|
|
||||||
@ -65,7 +68,7 @@ class Sidebar extends Component {
|
|||||||
const navDropdown = (item, key) => {
|
const navDropdown = (item, key) => {
|
||||||
return (
|
return (
|
||||||
<li key={key} className={activeRoute(item.url, props)}>
|
<li key={key} className={activeRoute(item.url, props)}>
|
||||||
<a className="nav-link nav-dropdown-toggle" href="#" onClick={handleClick.bind(this)}><i className={item.icon}></i> {item.name}</a>
|
<a className="nav-link nav-dropdown-toggle" href="#" onClick={handleClick.bind(this)}><i className={item.icon}></i>{item.name}</a>
|
||||||
<ul className="nav-dropdown-items">
|
<ul className="nav-dropdown-items">
|
||||||
{navList(item.children)}
|
{navList(item.children)}
|
||||||
</ul>
|
</ul>
|
||||||
@ -87,14 +90,17 @@ class Sidebar extends Component {
|
|||||||
// sidebar-nav root
|
// sidebar-nav root
|
||||||
return (
|
return (
|
||||||
<div className="sidebar">
|
<div className="sidebar">
|
||||||
|
<SidebarHeader/>
|
||||||
|
<SidebarForm/>
|
||||||
<nav className="sidebar-nav">
|
<nav className="sidebar-nav">
|
||||||
<Nav>
|
<Nav>
|
||||||
{navList(nav.items)}
|
{navList(nav.items)}
|
||||||
</Nav>
|
</Nav>
|
||||||
</nav>
|
</nav>
|
||||||
|
<SidebarFooter/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Sidebar;
|
export default Sidebar;
|
||||||
|
|||||||
@ -0,0 +1,14 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "SidebarFooter",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "./SidebarFooter.js"
|
||||||
|
}
|
||||||
14
React_Full_Project/src/components/SidebarForm/SidebarForm.js
Normal file
14
React_Full_Project/src/components/SidebarForm/SidebarForm.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "SidebarForm",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "./SidebarForm.js"
|
||||||
|
}
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
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;
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "SidebarHeader",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "./SidebarHeader.js"
|
||||||
|
}
|
||||||
@ -1,15 +1,16 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import {HashRouter, Route, Switch} from 'react-router-dom';
|
import {HashRouter, Route, Switch} from 'react-router-dom';
|
||||||
import {createBrowserHistory} from 'history';
|
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
// Import Font Awesome Icons Set
|
// Import Font Awesome Icons Set
|
||||||
import 'font-awesome/css/font-awesome.min.css';
|
import 'font-awesome/css/font-awesome.min.css';
|
||||||
// Import Simple Line Icons Set
|
// Import Simple Line Icons Set
|
||||||
import 'simple-line-icons/css/simple-line-icons.css';
|
import 'simple-line-icons/css/simple-line-icons.css';
|
||||||
// Import Main styles for this application
|
// Import Main styles for this application
|
||||||
import '../scss/style.scss'
|
import '../scss/style.scss'
|
||||||
|
// Temp fix for reactstrap
|
||||||
|
import '../scss/core/_dropdown-menu-right.scss'
|
||||||
|
|
||||||
// Containers
|
// Containers
|
||||||
import Full from './containers/Full/'
|
import Full from './containers/Full/'
|
||||||
@ -20,10 +21,8 @@ import Register from './views/Pages/Register/'
|
|||||||
import Page404 from './views/Pages/Page404/'
|
import Page404 from './views/Pages/Page404/'
|
||||||
import Page500 from './views/Pages/Page500/'
|
import Page500 from './views/Pages/Page500/'
|
||||||
|
|
||||||
const history = createBrowserHistory();
|
|
||||||
|
|
||||||
ReactDOM.render((
|
ReactDOM.render((
|
||||||
<HashRouter history={history}>
|
<HashRouter>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path="/login" name="Login Page" component={Login}/>
|
<Route exact path="/login" name="Login Page" component={Login}/>
|
||||||
<Route exact path="/register" name="Register Page" component={Register}/>
|
<Route exact path="/register" name="Register Page" component={Register}/>
|
||||||
|
|||||||
24
React_Starter/CHANGELOG.md
Normal file
24
React_Starter/CHANGELOG.md
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
## Changelog [react](./REACT.md) version
|
||||||
|
|
||||||
|
### 2017.08.24
|
||||||
|
- webpack.config env.prod
|
||||||
|
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
||||||
|
- callout.scss .chart-wrapper hotfix (full)
|
||||||
|
|
||||||
|
### 2017.08.11
|
||||||
|
- Bootstrap 4 beta
|
||||||
|
- Dashboard component (full):
|
||||||
|
- line chart for social box
|
||||||
|
- sparkline chart for callout
|
||||||
|
|
||||||
|
### 2017.08.01
|
||||||
|
- Sidebar component:
|
||||||
|
- title item with optional wrapper and class (_nav.js)
|
||||||
|
- nav link item with optional badge
|
||||||
|
- code refactoring
|
||||||
|
|
||||||
|
### 2017.07.31
|
||||||
|
- moved to [reactstrap](https://reactstrap.github.io/)
|
||||||
|
- moved to [webpack](https://webpack.js.org/) (dropping gulp)
|
||||||
|
- data driven Sidebar component (_nav.js)
|
||||||
|
|
||||||
36
React_Starter/REACT.md
Normal file
36
React_Starter/REACT.md
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
# React version
|
||||||
|
|
||||||
|
## Intro
|
||||||
|
|
||||||
|
It uses Sass (with .scss). The style is loaded at the component level.
|
||||||
|
|
||||||
|
Dependencies can be handled by **npm**.
|
||||||
|
|
||||||
|
## Directories
|
||||||
|
|
||||||
|
```
|
||||||
|
src (js|jsx source)
|
||||||
|
scss (scss source)
|
||||||
|
public (html template)
|
||||||
|
public/img (images)
|
||||||
|
```
|
||||||
|
|
||||||
|
## Usage
|
||||||
|
|
||||||
|
**npm i** - to install dependencies
|
||||||
|
|
||||||
|
## Sctipts
|
||||||
|
|
||||||
|
**npm start** for developing (it runs webpack-dev-server)
|
||||||
|
|
||||||
|
**npm run build** to run a dev build
|
||||||
|
|
||||||
|
**npm run clean** to clean build dir
|
||||||
|
|
||||||
|
**npm run dev** to run a dev build with watching filesystem for changes
|
||||||
|
|
||||||
|
|
||||||
|
## See also
|
||||||
|
|
||||||
|
[Changelog](./CHANGELOG.md)
|
||||||
|
[Readme](./README.md)
|
||||||
@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "coreui-react",
|
"name": "coreui-react",
|
||||||
"version": "1.0.0-alpha.6",
|
"version": "1.0.0",
|
||||||
"description": "CoreUI React Open Source Bootstrap Admin Template",
|
"description": "CoreUI React Open Source Bootstrap Admin Template",
|
||||||
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
||||||
"url": "http://coreui.io",
|
"url": "http://coreui.io",
|
||||||
@ -15,32 +15,32 @@
|
|||||||
"babel-preset-env": "^1.6.0",
|
"babel-preset-env": "^1.6.0",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"copy-webpack-plugin": "^4.0.1",
|
"copy-webpack-plugin": "^4.0.1",
|
||||||
"css-hot-loader": "^1.3.0",
|
"css-hot-loader": "^1.3.1",
|
||||||
"css-loader": "^0.28.5",
|
"css-loader": "^0.28.7",
|
||||||
"extract-text-webpack-plugin": "^3.0.0",
|
"extract-text-webpack-plugin": "^3.0.0",
|
||||||
"file-loader": "^0.11.2",
|
"file-loader": "^0.11.2",
|
||||||
"html-loader": "^0.5.1",
|
"html-loader": "^0.5.1",
|
||||||
"html-webpack-plugin": "^2.30.1",
|
"html-webpack-plugin": "^2.30.1",
|
||||||
"node-sass": "^4.5.3",
|
"node-sass": "^4.5.3",
|
||||||
"rimraf": "^2.6.1",
|
"rimraf": "^2.6.2",
|
||||||
"sass-loader": "^6.0.6",
|
"sass-loader": "^6.0.6",
|
||||||
"source-list-map": "^2.0.0",
|
"source-list-map": "^2.0.0",
|
||||||
"style-loader": "^0.18.2",
|
"style-loader": "^0.18.2",
|
||||||
"uglify-js": "^3.0.28",
|
"uglify-js": "^3.1.1",
|
||||||
"url-loader": "^0.5.9",
|
"url-loader": "^0.5.9",
|
||||||
"webpack": "^3.5.5",
|
"webpack": "^3.6.0",
|
||||||
"webpack-dev-server": "^2.7.1"
|
"webpack-dev-server": "^2.8.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"bootstrap": "^4.0.0-beta",
|
"bootstrap": "^4.0.0-beta",
|
||||||
"chart.js": "2.6.0",
|
"chart.js": "2.7.0",
|
||||||
"font-awesome": "^4.7.0",
|
"font-awesome": "^4.7.0",
|
||||||
"history": "4.7.2",
|
"history": "4.7.2",
|
||||||
"react": "^15.6.1",
|
"react": "^15.6.1",
|
||||||
"react-chartjs-2": "2.6.1",
|
"react-chartjs-2": "2.6.2",
|
||||||
"react-dom": "^15.6.1",
|
"react-dom": "^15.6.1",
|
||||||
"react-router-dom": "4.2.2",
|
"react-router-dom": "4.2.2",
|
||||||
"react-transition-group": "^1.2.0",
|
"react-transition-group": "^2.2.0",
|
||||||
"reactstrap": "^4.8.0",
|
"reactstrap": "^4.8.0",
|
||||||
"simple-line-icons": "^2.4.1"
|
"simple-line-icons": "^2.4.1"
|
||||||
},
|
},
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
.breadcrumb {
|
.breadcrumb {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin-bottom: 1.5 * $spacer;
|
margin: $breadcrumb-margin;
|
||||||
|
|
||||||
@include borders($breadcrumb-borders);
|
@include borders($breadcrumb-borders);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -11,10 +11,10 @@
|
|||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 18px;
|
top: 10px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
float: right;
|
float: right;
|
||||||
width: 60%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
7
React_Starter/scss/core/_dropdown-menu-right.scss
Normal file
7
React_Starter/scss/core/_dropdown-menu-right.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
// Temp fix for reactstrap
|
||||||
|
.show {
|
||||||
|
> .dropdown-menu-right {
|
||||||
|
right: 0;
|
||||||
|
left: auto; // Reset the default from `.dropdown-menu`
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -11,8 +11,8 @@
|
|||||||
app-dashboard,
|
app-dashboard,
|
||||||
app-root {
|
app-root {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
min-height: 100vh;
|
min-height: 100vh;
|
||||||
|
flex-direction: column;
|
||||||
}
|
}
|
||||||
|
|
||||||
.app-header {
|
.app-header {
|
||||||
@ -26,12 +26,12 @@ app-root {
|
|||||||
.app-body {
|
.app-body {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
flex-grow: 1;
|
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
flex: 1;
|
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
@ -65,22 +65,22 @@ app-root {
|
|||||||
// Sidebar
|
// Sidebar
|
||||||
//
|
//
|
||||||
.sidebar-hidden {
|
.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-width;
|
margin-left: - $sidebar-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-fixed {
|
.sidebar-fixed {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: $zindex-sticky - 1;
|
||||||
width: $sidebar-width;
|
width: $sidebar-width;
|
||||||
height: 100%;
|
height: calc(100vh - #{$navbar-height});
|
||||||
|
// margin-top: - $navbar-height;
|
||||||
|
|
||||||
.sidebar-nav {
|
// .sidebar-nav {
|
||||||
height: calc(100vh - #{$navbar-height});
|
// height: calc(100vh - #{$navbar-height});
|
||||||
}
|
// }
|
||||||
}
|
}
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
@ -88,7 +88,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -99,12 +98,7 @@ app-root {
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
height: 100%;
|
height: calc(100vh - #{$navbar-height});
|
||||||
|
|
||||||
|
|
||||||
.sidebar-nav {
|
|
||||||
height: calc(100vh - #{$navbar-height});
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -115,14 +109,12 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-compact-width;
|
margin-left: - $sidebar-compact-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-fixed {
|
&.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: $sidebar-compact-width;
|
margin-left: $sidebar-compact-width;
|
||||||
}
|
}
|
||||||
@ -132,7 +124,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -143,17 +134,20 @@ app-root {
|
|||||||
.sidebar-minimized {
|
.sidebar-minimized {
|
||||||
.sidebar {
|
.sidebar {
|
||||||
flex: 0 0 $sidebar-minimized-width;
|
flex: 0 0 $sidebar-minimized-width;
|
||||||
|
.sidebar-header,
|
||||||
|
.sidebar-form,
|
||||||
|
.sidebar-footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-minimized-width;
|
margin-left: - $sidebar-minimized-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-fixed {
|
&.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: $sidebar-minimized-width;
|
margin-left: $sidebar-minimized-width;
|
||||||
}
|
}
|
||||||
@ -163,7 +157,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -176,14 +169,12 @@ app-root {
|
|||||||
// Aside Menu
|
// Aside Menu
|
||||||
//
|
//
|
||||||
.aside-menu-hidden {
|
.aside-menu-hidden {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
margin-right: - $aside-menu-width;
|
margin-right: - $aside-menu-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside-menu-fixed {
|
.aside-menu-fixed {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -199,7 +190,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.aside-menu-hidden {
|
&.aside-menu-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
@ -223,7 +213,6 @@ app-root {
|
|||||||
// Breadcrumb
|
// Breadcrumb
|
||||||
//
|
//
|
||||||
.breadcrumb-fixed {
|
.breadcrumb-fixed {
|
||||||
|
|
||||||
.main {
|
.main {
|
||||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||||
padding-top: $breadcrumb-height;
|
padding-top: $breadcrumb-height;
|
||||||
@ -283,7 +272,6 @@ app-root {
|
|||||||
// Footer
|
// Footer
|
||||||
//
|
//
|
||||||
.footer-fixed {
|
.footer-fixed {
|
||||||
|
|
||||||
.app-footer {
|
.app-footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
@ -306,6 +294,9 @@ app-root {
|
|||||||
.aside-menu {
|
.aside-menu {
|
||||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
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 {
|
.breadcrumb {
|
||||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||||
}
|
}
|
||||||
@ -315,12 +306,13 @@ app-root {
|
|||||||
//
|
//
|
||||||
|
|
||||||
@include media-breakpoint-down(md) {
|
@include media-breakpoint-down(md) {
|
||||||
|
.app-header.navbar {
|
||||||
.app-header {
|
|
||||||
position: fixed !important;
|
position: fixed !important;
|
||||||
z-index: $zindex-sticky;
|
z-index: $zindex-sticky;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
background-color: $navbar-brand-bg;
|
||||||
|
@include borders($navbar-brand-border);
|
||||||
|
|
||||||
.navbar-toggler {
|
.navbar-toggler {
|
||||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||||
@ -343,6 +335,7 @@ app-root {
|
|||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
z-index: $zindex-sticky - 1;
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
margin-left: - $mobile-sidebar-width;
|
margin-left: - $mobile-sidebar-width;
|
||||||
@ -368,7 +361,6 @@ app-root {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-mobile-show {
|
.sidebar-mobile-show {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
width: $mobile-sidebar-width;
|
width: $mobile-sidebar-width;
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
|
|||||||
@ -1,7 +1,7 @@
|
|||||||
.app-header.navbar {
|
.app-header.navbar {
|
||||||
position: relative;
|
position: relative;
|
||||||
flex-direction: row;
|
|
||||||
height: $navbar-height;
|
height: $navbar-height;
|
||||||
|
flex-direction: row;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background-color: $navbar-bg;
|
background-color: $navbar-bg;
|
||||||
|
|||||||
@ -44,20 +44,17 @@
|
|||||||
// Sidebar
|
// Sidebar
|
||||||
//
|
//
|
||||||
.sidebar-hidden {
|
.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-right: - $sidebar-width;
|
margin-right: - $sidebar-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-fixed {
|
.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-right: $sidebar-width;
|
margin-right: $sidebar-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
}
|
}
|
||||||
@ -70,20 +67,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
margin-left: - $sidebar-minimized-width;
|
margin-right: - $sidebar-minimized-width;
|
||||||
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-fixed {
|
&.sidebar-fixed {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: $sidebar-minimized-width;
|
margin-right: $sidebar-minimized-width;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.sidebar-hidden {
|
&.sidebar-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -95,15 +90,13 @@
|
|||||||
// Aside Menu
|
// Aside Menu
|
||||||
//
|
//
|
||||||
.aside-menu-hidden {
|
.aside-menu-hidden {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
// margin-right: 0;
|
margin-right: 0;
|
||||||
margin-left: - $aside-menu-width;
|
margin-left: - $aside-menu-width;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.aside-menu-fixed {
|
.aside-menu-fixed {
|
||||||
|
|
||||||
.aside-menu {
|
.aside-menu {
|
||||||
right: auto;
|
right: auto;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -115,7 +108,6 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.aside-menu-hidden {
|
&.aside-menu-hidden {
|
||||||
|
|
||||||
.main, .app-footer {
|
.main, .app-footer {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
}
|
}
|
||||||
@ -138,15 +130,12 @@
|
|||||||
// Sidebar Menu
|
// Sidebar Menu
|
||||||
.sidebar {
|
.sidebar {
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
direction: ltr;
|
|
||||||
* {
|
|
||||||
direction: rtl;
|
|
||||||
}
|
|
||||||
.nav {
|
.nav {
|
||||||
.nav-item {
|
.nav-item {
|
||||||
.nav-link {
|
.nav-link {
|
||||||
[class^="icon-"], [class*=" icon-"] {
|
direction: rtl;
|
||||||
margin-right: -4px;
|
i {
|
||||||
|
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||||
}
|
}
|
||||||
.badge {
|
.badge {
|
||||||
float: left;
|
float: left;
|
||||||
@ -158,13 +147,14 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
right: auto !important;
|
right: auto !important;
|
||||||
left: $sidebar-nav-link-padding-x;
|
left: $sidebar-nav-link-padding-x;
|
||||||
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.nav-dropdown {
|
&.nav-dropdown {
|
||||||
&.open {
|
&.open {
|
||||||
> .nav-link.nav-dropdown-toggle::before {
|
> .nav-link.nav-dropdown-toggle::before {
|
||||||
transform: rotate(90deg);
|
transform: rotate(270deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -173,6 +163,30 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.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
|
||||||
.horizontal-bars {
|
.horizontal-bars {
|
||||||
|
|
||||||
@ -249,6 +263,12 @@
|
|||||||
border: 0 solid $border-color;
|
border: 0 solid $border-color;
|
||||||
border-right-width: .25rem;
|
border-right-width: .25rem;
|
||||||
|
|
||||||
|
@each $color, $value in $theme-colors {
|
||||||
|
&.callout-#{$color} {
|
||||||
|
border-right-color: $value;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.chart-wrapper {
|
.chart-wrapper {
|
||||||
left: 0;
|
left: 0;
|
||||||
float: left;
|
float: left;
|
||||||
@ -258,10 +278,4 @@
|
|||||||
.callout-default {
|
.callout-default {
|
||||||
border-right-color: $text-muted;
|
border-right-color: $text-muted;
|
||||||
}
|
}
|
||||||
|
|
||||||
@each $color, $value in $theme-colors {
|
|
||||||
&.callout-#{$color} {
|
|
||||||
border-right-color: $value;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,8 @@
|
|||||||
// scss-lint:disable NestingDepth, SelectorDepth
|
// scss-lint:disable NestingDepth, SelectorDepth
|
||||||
.sidebar {
|
.sidebar {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
padding: $sidebar-padding;
|
padding: $sidebar-padding;
|
||||||
overflow: hidden;
|
|
||||||
color: $sidebar-color;
|
color: $sidebar-color;
|
||||||
background: $sidebar-bg;
|
background: $sidebar-bg;
|
||||||
@include borders($sidebar-borders);
|
@include borders($sidebar-borders);
|
||||||
@ -24,31 +25,47 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// 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 {
|
.sidebar-nav {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
flex: 1;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
margin-left: -10px;
|
margin-left: -10px;
|
||||||
-webkit-appearance: none;
|
-webkit-appearance: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
// &::-webkit-scrollbar-button { }
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-track {
|
&::-webkit-scrollbar-track {
|
||||||
background-color: lighten($sidebar-bg, 5%);
|
background-color: lighten($sidebar-bg, 5%);
|
||||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||||
}
|
}
|
||||||
|
|
||||||
// &::-webkit-scrollbar-track-piece { }
|
|
||||||
|
|
||||||
&::-webkit-scrollbar-thumb {
|
&::-webkit-scrollbar-thumb {
|
||||||
height: 50px;
|
height: 50px;
|
||||||
background-color: darken($sidebar-bg, 10%);
|
background-color: darken($sidebar-bg, 10%);
|
||||||
@ -57,183 +74,170 @@
|
|||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-width: 1px 2px;
|
border-width: 1px 2px;
|
||||||
}
|
}
|
||||||
|
|
||||||
// &::-webkit-scrollbar-corner { }
|
|
||||||
|
|
||||||
// &::-webkit-resizer { }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-title {
|
.nav-title {
|
||||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||||
font-size: 11px;
|
font-size: 11px;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
color: $sidebar-nav-title-color;
|
color: $sidebar-nav-title-color;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.nav-divider, .divider {
|
||||||
height: 10px;
|
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 {
|
.nav-item {
|
||||||
position: relative;
|
padding: 0;
|
||||||
margin: 0;
|
list-style: none;
|
||||||
transition: background .3s ease-in-out;
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
.nav-link {
|
||||||
max-height: 0;
|
display: block;
|
||||||
padding: 0;
|
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
||||||
margin: 0;
|
color: $sidebar-nav-link-color;
|
||||||
overflow-y: hidden;
|
text-decoration: none;
|
||||||
transition: max-height .3s ease-in-out;
|
background: $sidebar-nav-link-bg;
|
||||||
|
@include borders($sidebar-nav-link-borders);
|
||||||
|
@if $enable-sidebar-nav-rounded {
|
||||||
|
border-radius: $border-radius;
|
||||||
|
}
|
||||||
|
|
||||||
li {
|
i {
|
||||||
padding: 0;
|
display: inline-block;
|
||||||
list-style: none;
|
width: 20px;
|
||||||
}
|
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||||
}
|
font-size: 14px;
|
||||||
|
color: $sidebar-nav-link-icon-color;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.nav-link {
|
.badge {
|
||||||
display: block;
|
float: right;
|
||||||
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
|
margin-top: 2px;
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&.active {
|
||||||
color: $sidebar-nav-link-hover-color !important;
|
color: $sidebar-nav-link-active-color;
|
||||||
background: $sidebar-nav-link-hover-bg !important;
|
background: $sidebar-nav-link-active-bg;
|
||||||
@include borders($sidebar-nav-link-hover-borders);
|
@include borders($sidebar-nav-link-active-borders);
|
||||||
|
|
||||||
i {
|
i {
|
||||||
color: $sidebar-nav-link-hover-icon-color;
|
color: $sidebar-nav-link-active-icon-color;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
[class^="icon-"], [class*=" icon-"] {
|
|
||||||
display: inline-block;
|
|
||||||
margin-top: -4px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
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;
|
|
||||||
// margin-left: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
position: absolute;
|
|
||||||
top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
|
|
||||||
right: $sidebar-nav-link-padding-x;
|
|
||||||
display: block;
|
|
||||||
width: ($font-size-base);
|
|
||||||
height: ($font-size-base);
|
|
||||||
padding: 0;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
line-height: ($font-size-base * 3 / 4);
|
|
||||||
text-align: center;
|
|
||||||
content: "\2039";
|
|
||||||
transition: .3s;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown {
|
|
||||||
&.open {
|
|
||||||
background: $sidebar-nav-dropdown-bg;
|
|
||||||
@include borders($sidebar-nav-dropdown-borders);
|
|
||||||
@if $enable-sidebar-nav-rounded {
|
|
||||||
border-radius: $border-radius;
|
|
||||||
}
|
|
||||||
> ul, > ol {
|
|
||||||
// display: inline;
|
|
||||||
max-height: 1000px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.nt {
|
|
||||||
transition: 0s !important;
|
|
||||||
> ul, > ol {
|
|
||||||
transition: 0s !important;
|
|
||||||
}
|
|
||||||
.nav-link {
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
transition: 0s !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: $sidebar-nav-link-hover-color !important;
|
||||||
|
background: $sidebar-nav-link-hover-bg !important;
|
||||||
|
@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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 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: 1000px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -283,6 +287,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Minimized Sidebar
|
||||||
.sidebar-minimized {
|
.sidebar-minimized {
|
||||||
.hidden-cn {
|
.hidden-cn {
|
||||||
display: none;
|
display: none;
|
||||||
@ -290,10 +295,6 @@
|
|||||||
.sidebar {
|
.sidebar {
|
||||||
z-index: $zindex-sticky - 1;
|
z-index: $zindex-sticky - 1;
|
||||||
|
|
||||||
&:hover {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar-nav {
|
.sidebar-nav {
|
||||||
overflow: visible;
|
overflow: visible;
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||||
@ -301,122 +302,94 @@
|
|||||||
|
|
||||||
.nav {
|
.nav {
|
||||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||||
|
}
|
||||||
|
|
||||||
.nav-title, .divider {
|
.nav-divider, .divider,
|
||||||
|
.nav-title,
|
||||||
|
.sidebar-footer,
|
||||||
|
.sidebar-form,
|
||||||
|
.sidebar-header {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav-item {
|
&:hover {
|
||||||
width: $sidebar-minimized-width;
|
width: $sidebar-width + $sidebar-minimized-width;
|
||||||
overflow: hidden;
|
background: $sidebar-nav-link-hover-bg;
|
||||||
border-left: 0 !important;
|
|
||||||
|
|
||||||
ul {
|
.badge {
|
||||||
background: $sidebar-bg;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.nav-dropdown-toggle::before {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-dropdown-items {
|
||||||
|
.nav-item {
|
||||||
|
width: $sidebar-width;
|
||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
position: relative;
|
width: $sidebar-width;
|
||||||
padding-left: 0;
|
|
||||||
margin: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
border-left: 0 !important;
|
|
||||||
|
|
||||||
&.nav-dropdown-toggle {
|
|
||||||
|
|
||||||
&::before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
width: $sidebar-minimized-height;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 !important;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
position: absolute;
|
|
||||||
// top: 14px;
|
|
||||||
right: 15px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: $sidebar-width;
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
ul {
|
.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;
|
position: absolute;
|
||||||
left: $sidebar-minimized-width;
|
left: $sidebar-minimized-width;
|
||||||
|
display: inline;
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
width: $sidebar-width - $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul, ol {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown {
|
|
||||||
&.open {
|
|
||||||
background: $sidebar-nav-link-active-bg;
|
|
||||||
> .nav-link i {
|
|
||||||
color: $sidebar-nav-link-active-icon-color;
|
|
||||||
}
|
|
||||||
> ul, > ol {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
width: $sidebar-width + $sidebar-minimized-width;
|
|
||||||
overflow: visible;
|
|
||||||
background: $sidebar-nav-link-hover-bg;
|
|
||||||
transition: 0s;
|
|
||||||
|
|
||||||
> .nav-link {
|
|
||||||
width: $sidebar-width + $sidebar-minimized-width;
|
|
||||||
}
|
|
||||||
|
|
||||||
> ul, > ol {
|
|
||||||
display: inline;
|
|
||||||
max-height: 10000px;
|
|
||||||
transition: 0s;
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: $sidebar-width;
|
|
||||||
|
|
||||||
.nav-link {
|
|
||||||
width: $sidebar-width;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.nav-dropdown {
|
|
||||||
&.open {
|
|
||||||
> ul, > ol {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -16,25 +16,12 @@
|
|||||||
|
|
||||||
// Open state for the dropdown
|
// Open state for the dropdown
|
||||||
.open, .show {
|
.open, .show {
|
||||||
// Show the menu
|
|
||||||
> .dropdown-menu {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
> .dropdown-menu-right {
|
|
||||||
right: 0;
|
|
||||||
left: auto; // Reset the default from `.dropdown-menu`
|
|
||||||
}
|
|
||||||
// Remove the outline when :focus is triggered
|
// Remove the outline when :focus is triggered
|
||||||
> a {
|
> a {
|
||||||
outline: 0;
|
outline: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
//
|
|
||||||
//.modal-open .modal {
|
|
||||||
// display: block;
|
|
||||||
//}
|
|
||||||
|
|
||||||
// navbar dropdown fix
|
// navbar dropdown fix
|
||||||
.navbar .dropdown-toggle {
|
.navbar .dropdown-toggle {
|
||||||
@extend .nav-link;
|
@extend .nav-link;
|
||||||
|
|||||||
@ -72,11 +72,23 @@ $sidebar-compact-width: 150px !default;
|
|||||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||||
$sidebar-color: #fff !default;
|
$sidebar-color: #fff !default;
|
||||||
$sidebar-bg: $gray-800 !default;
|
$sidebar-bg: $gray-800 !default;
|
||||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
|
||||||
$sidebar-borders: none !default;
|
$sidebar-borders: none !default;
|
||||||
$mobile-sidebar-width: 220px !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 Navigation
|
||||||
|
|
||||||
$sidebar-nav-color: #fff !default;
|
$sidebar-nav-color: #fff !default;
|
||||||
@ -87,7 +99,7 @@ $sidebar-nav-link-padding-y: .75rem !default;
|
|||||||
$sidebar-nav-link-padding-x: 1rem !default;
|
$sidebar-nav-link-padding-x: 1rem !default;
|
||||||
$sidebar-nav-link-color: #fff !default;
|
$sidebar-nav-link-color: #fff !default;
|
||||||
$sidebar-nav-link-bg: transparent !default;
|
$sidebar-nav-link-bg: transparent !default;
|
||||||
$sidebar-nav-link-icon-color: $text-muted !default;
|
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||||
$sidebar-nav-link-borders: 0 !default;
|
$sidebar-nav-link-borders: 0 !default;
|
||||||
|
|
||||||
$sidebar-nav-link-hover-color: #fff !default;
|
$sidebar-nav-link-hover-color: #fff !default;
|
||||||
@ -103,6 +115,17 @@ $sidebar-nav-link-active-borders: 0 !default;
|
|||||||
$sidebar-nav-dropdown-color: #fff !default;
|
$sidebar-nav-dropdown-color: #fff !default;
|
||||||
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
|
||||||
$sidebar-nav-dropdown-borders: 0 !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;
|
||||||
|
|
||||||
// Top Navigation
|
// Top Navigation
|
||||||
|
|
||||||
@ -131,6 +154,7 @@ $top-nav-height: $navbar-height - 15px !default;
|
|||||||
|
|
||||||
// Breadcrumb
|
// Breadcrumb
|
||||||
|
|
||||||
|
$breadcrumb-margin: 0 0 (1.5 * $spacer) 0 !default;
|
||||||
$breadcrumb-borders: (
|
$breadcrumb-borders: (
|
||||||
bottom: (
|
bottom: (
|
||||||
size: 1px,
|
size: 1px,
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
/**
|
/**
|
||||||
* CoreUI - Open Source Bootstrap Admin Template
|
* CoreUI - Open Source Bootstrap Admin Template
|
||||||
* @version v1.0.0-alpha.6
|
* @version v1.0.0
|
||||||
* @link http://coreui.io
|
* @link http://coreui.io
|
||||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||||
* @license MIT
|
* @license MIT
|
||||||
@ -20,14 +20,14 @@
|
|||||||
// Import Bootstrap source files from bower_components
|
// Import Bootstrap source files from bower_components
|
||||||
// @import "bower_components/bootstrap/scss/bootstrap";
|
// @import "bower_components/bootstrap/scss/bootstrap";
|
||||||
|
|
||||||
// Import vendors styles
|
|
||||||
@import "vendors/vendors";
|
|
||||||
|
|
||||||
// Override core variables
|
// Override core variables
|
||||||
@import "core-variables";
|
@import "core-variables";
|
||||||
|
|
||||||
// Import core styles
|
// Import core styles
|
||||||
@import "core/core";
|
@import "core/core";
|
||||||
|
|
||||||
|
// Import vendors styles
|
||||||
|
@import "vendors/vendors";
|
||||||
|
|
||||||
// Custom styles
|
// Custom styles
|
||||||
@import "custom";
|
@import "custom";
|
||||||
|
|||||||
@ -33,7 +33,7 @@ class Header extends Component {
|
|||||||
<header className="app-header navbar">
|
<header className="app-header navbar">
|
||||||
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
||||||
<NavbarBrand href="#"></NavbarBrand>
|
<NavbarBrand href="#"></NavbarBrand>
|
||||||
<NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarToggle}>☰</NavbarToggler>
|
<NavbarToggler className="d-md-down-none mr-auto" onClick={this.sidebarMinimize}>☰</NavbarToggler>
|
||||||
</header>
|
</header>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -2,7 +2,10 @@ import React, {Component} from 'react';
|
|||||||
import {NavLink} from 'react-router-dom';
|
import {NavLink} from 'react-router-dom';
|
||||||
import {Badge, Nav, NavItem} from 'reactstrap';
|
import {Badge, Nav, NavItem} from 'reactstrap';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import nav from './_nav'
|
import nav from './_nav';
|
||||||
|
import SidebarFooter from './../SidebarFooter';
|
||||||
|
import SidebarForm from './../SidebarForm';
|
||||||
|
import SidebarHeader from './../SidebarHeader';
|
||||||
|
|
||||||
class Sidebar extends Component {
|
class Sidebar extends Component {
|
||||||
|
|
||||||
@ -38,7 +41,7 @@ class Sidebar extends Component {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// simple wrapper for nav-title item
|
// simple wrapper for nav-title item
|
||||||
const wrapper = item => { return (!item.wrapper ? item.name : (React.createElement(item.wrapper.element, item.wrapper.attributes, item.name))) };
|
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
|
// nav list section title
|
||||||
const title = (title, key) => {
|
const title = (title, key) => {
|
||||||
@ -65,7 +68,7 @@ class Sidebar extends Component {
|
|||||||
const navDropdown = (item, key) => {
|
const navDropdown = (item, key) => {
|
||||||
return (
|
return (
|
||||||
<li key={key} className={activeRoute(item.url, props)}>
|
<li key={key} className={activeRoute(item.url, props)}>
|
||||||
<a className="nav-link nav-dropdown-toggle" href="#" onClick={handleClick.bind(this)}><i className={item.icon}></i> {item.name}</a>
|
<a className="nav-link nav-dropdown-toggle" href="#" onClick={handleClick.bind(this)}><i className={item.icon}></i>{item.name}</a>
|
||||||
<ul className="nav-dropdown-items">
|
<ul className="nav-dropdown-items">
|
||||||
{navList(item.children)}
|
{navList(item.children)}
|
||||||
</ul>
|
</ul>
|
||||||
@ -87,14 +90,17 @@ class Sidebar extends Component {
|
|||||||
// sidebar-nav root
|
// sidebar-nav root
|
||||||
return (
|
return (
|
||||||
<div className="sidebar">
|
<div className="sidebar">
|
||||||
|
<SidebarHeader/>
|
||||||
|
<SidebarForm/>
|
||||||
<nav className="sidebar-nav">
|
<nav className="sidebar-nav">
|
||||||
<Nav>
|
<Nav>
|
||||||
{navList(nav.items)}
|
{navList(nav.items)}
|
||||||
</Nav>
|
</Nav>
|
||||||
</nav>
|
</nav>
|
||||||
|
<SidebarFooter/>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Sidebar;
|
export default Sidebar;
|
||||||
|
|||||||
14
React_Starter/src/components/SidebarFooter/SidebarFooter.js
Normal file
14
React_Starter/src/components/SidebarFooter/SidebarFooter.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
|
class SidebarFooter extends Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return null
|
||||||
|
// Uncomment following code lines to add Sidebar Footer
|
||||||
|
// return (
|
||||||
|
// <div className="sidebar-footer"></div>
|
||||||
|
// )
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SidebarFooter;
|
||||||
6
React_Starter/src/components/SidebarFooter/package.json
Normal file
6
React_Starter/src/components/SidebarFooter/package.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "SidebarFooter",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "./SidebarFooter.js"
|
||||||
|
}
|
||||||
14
React_Starter/src/components/SidebarForm/SidebarForm.js
Normal file
14
React_Starter/src/components/SidebarForm/SidebarForm.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
|
class SidebarForm extends Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return null
|
||||||
|
// Uncomment following code lines to add Sidebar Form
|
||||||
|
// return (
|
||||||
|
// <div className="sidebar-form"></div>
|
||||||
|
// )
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SidebarForm;
|
||||||
6
React_Starter/src/components/SidebarForm/package.json
Normal file
6
React_Starter/src/components/SidebarForm/package.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "SidebarForm",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "./SidebarForm.js"
|
||||||
|
}
|
||||||
14
React_Starter/src/components/SidebarHeader/SidebarHeader.js
Normal file
14
React_Starter/src/components/SidebarHeader/SidebarHeader.js
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import React, {Component} from 'react';
|
||||||
|
|
||||||
|
class SidebarHeader extends Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return null
|
||||||
|
// Uncomment following code lines to add Sidebar Header
|
||||||
|
// return (
|
||||||
|
// <div className="sidebar-header"></div>
|
||||||
|
// )
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SidebarHeader;
|
||||||
6
React_Starter/src/components/SidebarHeader/package.json
Normal file
6
React_Starter/src/components/SidebarHeader/package.json
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
{
|
||||||
|
"name": "SidebarHeader",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"private": true,
|
||||||
|
"main": "./SidebarHeader.js"
|
||||||
|
}
|
||||||
@ -1,23 +1,22 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import {HashRouter, Route, Switch} from 'react-router-dom';
|
import {HashRouter, Route, Switch} from 'react-router-dom';
|
||||||
import {createBrowserHistory} from 'history';
|
|
||||||
|
|
||||||
// Styles
|
// Styles
|
||||||
// Import Font Awesome Icons Set
|
// Import Font Awesome Icons Set
|
||||||
import 'font-awesome/css/font-awesome.min.css';
|
import 'font-awesome/css/font-awesome.min.css';
|
||||||
// Import Simple Line Icons Set
|
// Import Simple Line Icons Set
|
||||||
import 'simple-line-icons/css/simple-line-icons.css';
|
import 'simple-line-icons/css/simple-line-icons.css';
|
||||||
// Import Main styles for this application
|
// Import Main styles for this application
|
||||||
import '../scss/style.scss'
|
import '../scss/style.scss'
|
||||||
|
// Temp fix for reactstrap
|
||||||
|
import '../scss/core/_dropdown-menu-right.scss'
|
||||||
|
|
||||||
// Containers
|
// Containers
|
||||||
import Full from './containers/Full/'
|
import Full from './containers/Full/'
|
||||||
|
|
||||||
const history = createBrowserHistory();
|
|
||||||
|
|
||||||
ReactDOM.render((
|
ReactDOM.render((
|
||||||
<HashRouter history={history}>
|
<HashRouter>
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route path="/" name="Home" component={Full}/>
|
<Route path="/" name="Home" component={Full}/>
|
||||||
</Switch>
|
</Switch>
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
{
|
{
|
||||||
"name": "coreui.io-react",
|
"name": "coreui.io-react",
|
||||||
"version": "1.0.0-alpha.6",
|
"version": "1.0.0",
|
||||||
"description": "Open Source React Admin Template",
|
"description": "Open Source React Admin Template",
|
||||||
"main": "",
|
"main": "",
|
||||||
"homepage": "http://coreui.io",
|
"homepage": "http://coreui.io/react/",
|
||||||
"github": "https://github.com/mrholek/CoreUI-React#readme",
|
"github": "https://github.com/mrholek/CoreUI-React#readme",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"test": "echo \"Error: no test specified\" && exit 1"
|
"test": "echo \"Error: no test specified\" && exit 1"
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user