v1.0.0
This commit is contained in:
Łukasz Holeczek
parent
7ca12d7779
commit
c5cc339531
@ -1,23 +1,23 @@
|
||||
## Changelog [react](./REACT.md) version
|
||||
|
||||
### 2017.08.24
|
||||
##### 2017.08.24
|
||||
- webpack.config env.prod
|
||||
- Dashboard .dropdown-menu-right temp.scss hotfix (full)
|
||||
- callout.scss .chart-wrapper hotfix (full)
|
||||
|
||||
### 2017.08.11
|
||||
##### 2017.08.11
|
||||
- Bootstrap 4 beta
|
||||
- Dashboard component (full):
|
||||
- line chart for social box
|
||||
- sparkline chart for callout
|
||||
|
||||
### 2017.08.01
|
||||
##### 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
|
||||
##### 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)
|
||||
|
||||
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)
|
||||
|
||||
17
REACT.md
17
REACT.md
@ -1,35 +1,28 @@
|
||||
# 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)
|
||||
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)
|
||||
|
||||
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)
|
||||
|
||||
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)
|
||||
|
||||
|
||||
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",
|
||||
"version": "1.0.0-alpha.6",
|
||||
"version": "1.0.0",
|
||||
"description": "CoreUI React Open Source Bootstrap Admin Template",
|
||||
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
||||
"url": "http://coreui.io",
|
||||
@ -15,32 +15,32 @@
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-hot-loader": "^1.3.0",
|
||||
"css-loader": "^0.28.5",
|
||||
"css-hot-loader": "^1.3.1",
|
||||
"css-loader": "^0.28.7",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^0.11.2",
|
||||
"html-loader": "^0.5.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"node-sass": "^4.5.3",
|
||||
"rimraf": "^2.6.1",
|
||||
"rimraf": "^2.6.2",
|
||||
"sass-loader": "^6.0.6",
|
||||
"source-list-map": "^2.0.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"uglify-js": "^3.0.28",
|
||||
"uglify-js": "^3.1.1",
|
||||
"url-loader": "^0.5.9",
|
||||
"webpack": "^3.5.5",
|
||||
"webpack-dev-server": "^2.7.1"
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.8.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.0.0-beta",
|
||||
"chart.js": "2.6.0",
|
||||
"chart.js": "2.7.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"history": "4.7.2",
|
||||
"react": "^15.6.1",
|
||||
"react-chartjs-2": "2.6.1",
|
||||
"react-chartjs-2": "2.6.2",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-router-dom": "4.2.2",
|
||||
"react-transition-group": "^1.2.0",
|
||||
"react-transition-group": "^2.2.0",
|
||||
"reactstrap": "^4.8.0",
|
||||
"simple-line-icons": "^2.4.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
margin-bottom: 1.5 * $spacer;
|
||||
margin: $breadcrumb-margin;
|
||||
|
||||
@include borders($breadcrumb-borders);
|
||||
}
|
||||
|
||||
@ -11,10 +11,10 @@
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
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-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
@ -26,12 +26,12 @@ app-root {
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@ -65,22 +65,22 @@ app-root {
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
|
||||
.sidebar-nav {
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
// margin-top: - $navbar-height;
|
||||
|
||||
// .sidebar-nav {
|
||||
// height: calc(100vh - #{$navbar-height});
|
||||
// }
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
@ -88,7 +88,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -99,13 +98,8 @@ app-root {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.sidebar-nav {
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@ -115,14 +109,12 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-compact-width;
|
||||
}
|
||||
@ -132,7 +124,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -143,17 +134,20 @@ app-root {
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
.sidebar-header,
|
||||
.sidebar-form,
|
||||
.sidebar-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
}
|
||||
@ -163,7 +157,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -176,14 +169,12 @@ app-root {
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
|
||||
.aside-menu {
|
||||
margin-right: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@ -199,7 +190,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -223,7 +213,6 @@ app-root {
|
||||
// Breadcrumb
|
||||
//
|
||||
.breadcrumb-fixed {
|
||||
|
||||
.main {
|
||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||
padding-top: $breadcrumb-height;
|
||||
@ -283,7 +272,6 @@ app-root {
|
||||
// Footer
|
||||
//
|
||||
.footer-fixed {
|
||||
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -306,6 +294,9 @@ app-root {
|
||||
.aside-menu {
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
||||
}
|
||||
.sidebar-nav {
|
||||
transition: width $layout-transition-speed;
|
||||
}
|
||||
.breadcrumb {
|
||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||
}
|
||||
@ -315,12 +306,13 @@ app-root {
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
.app-header {
|
||||
.app-header.navbar {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $navbar-brand-bg;
|
||||
@include borders($navbar-brand-border);
|
||||
|
||||
.navbar-toggler {
|
||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||
@ -343,6 +335,7 @@ app-root {
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $mobile-sidebar-width;
|
||||
height: 100%;
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
@ -368,7 +361,6 @@ app-root {
|
||||
}
|
||||
|
||||
.sidebar-mobile-show {
|
||||
|
||||
.sidebar {
|
||||
width: $mobile-sidebar-width;
|
||||
margin-left: 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.app-header.navbar {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
height: $navbar-height;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $navbar-bg;
|
||||
|
||||
@ -44,20 +44,17 @@
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -70,20 +67,18 @@
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
margin-right: - $sidebar-minimized-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
margin-right: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -95,15 +90,13 @@
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
|
||||
.aside-menu {
|
||||
// margin-right: 0;
|
||||
margin-right: 0;
|
||||
margin-left: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
|
||||
.aside-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
@ -115,7 +108,6 @@
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -138,15 +130,12 @@
|
||||
// Sidebar Menu
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
direction: ltr;
|
||||
* {
|
||||
direction: rtl;
|
||||
}
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
margin-right: -4px;
|
||||
direction: rtl;
|
||||
i {
|
||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||
}
|
||||
.badge {
|
||||
float: left;
|
||||
@ -158,13 +147,14 @@
|
||||
position: absolute;
|
||||
right: auto !important;
|
||||
left: $sidebar-nav-link-padding-x;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(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 {
|
||||
|
||||
@ -249,6 +263,12 @@
|
||||
border: 0 solid $border-color;
|
||||
border-right-width: .25rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
left: 0;
|
||||
float: left;
|
||||
@ -258,10 +278,4 @@
|
||||
.callout-default {
|
||||
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
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $sidebar-padding;
|
||||
overflow: hidden;
|
||||
color: $sidebar-color;
|
||||
background: $sidebar-bg;
|
||||
@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 {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-button { }
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($sidebar-bg, 5%);
|
||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-track-piece { }
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($sidebar-bg, 10%);
|
||||
@ -57,15 +74,12 @@
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-corner { }
|
||||
|
||||
// &::-webkit-resizer { }
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
@ -75,7 +89,7 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.divider {
|
||||
.nav-divider, .divider {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
@ -83,15 +97,16 @@
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
|
||||
ul {
|
||||
.nav-dropdown-items {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
|
||||
li {
|
||||
.nav-item {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@ -108,14 +123,18 @@
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&: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;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -128,54 +147,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
margin-top: -4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color !important;
|
||||
background: $sidebar-nav-link-hover-bg !important;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
|
||||
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;
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
// margin-left: 10px;
|
||||
&.nav-dropdown-toggle::before {
|
||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
|
||||
top: 50%;
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: ($font-size-base);
|
||||
height: ($font-size-base);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
font-size: $font-size-base;
|
||||
line-height: ($font-size-base * 3 / 4);
|
||||
text-align: center;
|
||||
content: "\2039";
|
||||
transition: .3s;
|
||||
}
|
||||
margin-top: -4px;
|
||||
content: "";
|
||||
background-image: $sidebar-nav-dropdown-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
// 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;
|
||||
}
|
||||
> ul, > ol {
|
||||
// display: inline;
|
||||
> .nav-dropdown-items {
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
@ -192,21 +207,6 @@
|
||||
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;
|
||||
@ -233,7 +233,11 @@
|
||||
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 {
|
||||
.hidden-cn {
|
||||
display: none;
|
||||
@ -290,10 +295,6 @@
|
||||
.sidebar {
|
||||
z-index: $zindex-sticky - 1;
|
||||
|
||||
&:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
overflow: visible;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
@ -301,8 +302,13 @@
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav-title, .divider {
|
||||
.nav-divider, .divider,
|
||||
.nav-title,
|
||||
.sidebar-footer,
|
||||
.sidebar-form,
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -311,8 +317,18 @@
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
|
||||
ul {
|
||||
background: $sidebar-bg;
|
||||
&: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 {
|
||||
@ -322,86 +338,37 @@
|
||||
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;
|
||||
// padding: 0;
|
||||
// margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
// top: 14px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width;
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
|
||||
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 {
|
||||
&.nav-dropdown-toggle::before {
|
||||
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 {
|
||||
.nav-dropdown-items {
|
||||
.nav-item {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
@ -410,16 +377,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> ul, > ol {
|
||||
.nav > .nav-dropdown {
|
||||
> .nav-dropdown-items {
|
||||
display: none;
|
||||
max-height: 1000px;
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
> .nav-dropdown-items {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,25 +16,12 @@
|
||||
|
||||
// Open state for the dropdown
|
||||
.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
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
//.modal-open .modal {
|
||||
// display: block;
|
||||
//}
|
||||
|
||||
// navbar dropdown fix
|
||||
.navbar .dropdown-toggle {
|
||||
@extend .nav-link;
|
||||
|
||||
@ -72,11 +72,23 @@ $sidebar-compact-width: 150px !default;
|
||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||
$sidebar-color: #fff !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;
|
||||
$mobile-sidebar-width: 220px !default;
|
||||
|
||||
// Sidebar Header
|
||||
|
||||
$sidebar-header-height: auto !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-header-padding-y: .75rem !default;
|
||||
$sidebar-header-padding-x: 1rem !default;
|
||||
|
||||
// Sidebar Form
|
||||
|
||||
$sidebar-form-border: 0 !default;
|
||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
||||
$sidebar-form-color: #fff !default;
|
||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
||||
|
||||
// Sidebar Navigation
|
||||
|
||||
$sidebar-nav-color: #fff !default;
|
||||
@ -87,7 +99,7 @@ $sidebar-nav-link-padding-y: .75rem !default;
|
||||
$sidebar-nav-link-padding-x: 1rem !default;
|
||||
$sidebar-nav-link-color: #fff !default;
|
||||
$sidebar-nav-link-bg: transparent !default;
|
||||
$sidebar-nav-link-icon-color: $text-muted !default;
|
||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||
$sidebar-nav-link-borders: 0 !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-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-nav-dropdown-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
||||
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
||||
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar Footer
|
||||
|
||||
$sidebar-footer-height: auto !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-padding-y: .75rem !default;
|
||||
$sidebar-footer-padding-x: 1rem !default;
|
||||
|
||||
// Top Navigation
|
||||
|
||||
@ -131,6 +154,7 @@ $top-nav-height: $navbar-height - 15px !default;
|
||||
|
||||
// Breadcrumb
|
||||
|
||||
$breadcrumb-margin: 0 0 (1.5 * $spacer) 0 !default;
|
||||
$breadcrumb-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* CoreUI - Open Source Bootstrap Admin Template
|
||||
* @version v1.0.0-alpha.6
|
||||
* @version v1.0.0
|
||||
* @link http://coreui.io
|
||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||
* @license MIT
|
||||
@ -20,14 +20,14 @@
|
||||
// Import Bootstrap source files from bower_components
|
||||
// @import "bower_components/bootstrap/scss/bootstrap";
|
||||
|
||||
// Import vendors styles
|
||||
@import "vendors/vendors";
|
||||
|
||||
// Override core variables
|
||||
@import "core-variables";
|
||||
|
||||
// Import core styles
|
||||
@import "core/core";
|
||||
|
||||
// Import vendors styles
|
||||
@import "vendors/vendors";
|
||||
|
||||
// Custom styles
|
||||
@import "custom";
|
||||
|
||||
@ -54,7 +54,7 @@ class Header extends Component {
|
||||
<header className="app-header navbar">
|
||||
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
||||
<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>
|
||||
<NavItem className="px-3">
|
||||
<NavLink href="#">Dashboard</NavLink>
|
||||
|
||||
@ -2,7 +2,10 @@ import React, {Component} from 'react';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
import {Badge, Nav, NavItem} from 'reactstrap';
|
||||
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 {
|
||||
|
||||
@ -65,7 +68,7 @@ class Sidebar extends Component {
|
||||
const navDropdown = (item, key) => {
|
||||
return (
|
||||
<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">
|
||||
{navList(item.children)}
|
||||
</ul>
|
||||
@ -87,11 +90,14 @@ class Sidebar extends Component {
|
||||
// sidebar-nav root
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<SidebarHeader/>
|
||||
<SidebarForm/>
|
||||
<nav className="sidebar-nav">
|
||||
<Nav>
|
||||
{navList(nav.items)}
|
||||
</Nav>
|
||||
</nav>
|
||||
<SidebarFooter/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
@ -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 ReactDOM from 'react-dom';
|
||||
import {HashRouter, Route, Switch} from 'react-router-dom';
|
||||
import {createBrowserHistory} from 'history';
|
||||
|
||||
// Styles
|
||||
// Import Font Awesome Icons Set
|
||||
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 Main styles for this application
|
||||
import '../scss/style.scss'
|
||||
// Temp fix for reactstrap
|
||||
import '../scss/core/_dropdown-menu-right.scss'
|
||||
|
||||
// Containers
|
||||
import Full from './containers/Full/'
|
||||
@ -20,10 +21,8 @@ import Register from './views/Pages/Register/'
|
||||
import Page404 from './views/Pages/Page404/'
|
||||
import Page500 from './views/Pages/Page500/'
|
||||
|
||||
const history = createBrowserHistory();
|
||||
|
||||
ReactDOM.render((
|
||||
<HashRouter history={history}>
|
||||
<HashRouter>
|
||||
<Switch>
|
||||
<Route exact path="/login" name="Login Page" component={Login}/>
|
||||
<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",
|
||||
"version": "1.0.0-alpha.6",
|
||||
"version": "1.0.0",
|
||||
"description": "CoreUI React Open Source Bootstrap Admin Template",
|
||||
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
|
||||
"url": "http://coreui.io",
|
||||
@ -15,32 +15,32 @@
|
||||
"babel-preset-env": "^1.6.0",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"copy-webpack-plugin": "^4.0.1",
|
||||
"css-hot-loader": "^1.3.0",
|
||||
"css-loader": "^0.28.5",
|
||||
"css-hot-loader": "^1.3.1",
|
||||
"css-loader": "^0.28.7",
|
||||
"extract-text-webpack-plugin": "^3.0.0",
|
||||
"file-loader": "^0.11.2",
|
||||
"html-loader": "^0.5.1",
|
||||
"html-webpack-plugin": "^2.30.1",
|
||||
"node-sass": "^4.5.3",
|
||||
"rimraf": "^2.6.1",
|
||||
"rimraf": "^2.6.2",
|
||||
"sass-loader": "^6.0.6",
|
||||
"source-list-map": "^2.0.0",
|
||||
"style-loader": "^0.18.2",
|
||||
"uglify-js": "^3.0.28",
|
||||
"uglify-js": "^3.1.1",
|
||||
"url-loader": "^0.5.9",
|
||||
"webpack": "^3.5.5",
|
||||
"webpack-dev-server": "^2.7.1"
|
||||
"webpack": "^3.6.0",
|
||||
"webpack-dev-server": "^2.8.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "^4.0.0-beta",
|
||||
"chart.js": "2.6.0",
|
||||
"chart.js": "2.7.0",
|
||||
"font-awesome": "^4.7.0",
|
||||
"history": "4.7.2",
|
||||
"react": "^15.6.1",
|
||||
"react-chartjs-2": "2.6.1",
|
||||
"react-chartjs-2": "2.6.2",
|
||||
"react-dom": "^15.6.1",
|
||||
"react-router-dom": "4.2.2",
|
||||
"react-transition-group": "^1.2.0",
|
||||
"react-transition-group": "^2.2.0",
|
||||
"reactstrap": "^4.8.0",
|
||||
"simple-line-icons": "^2.4.1"
|
||||
},
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
.breadcrumb {
|
||||
position: relative;
|
||||
margin-bottom: 1.5 * $spacer;
|
||||
margin: $breadcrumb-margin;
|
||||
|
||||
@include borders($breadcrumb-borders);
|
||||
}
|
||||
|
||||
@ -11,10 +11,10 @@
|
||||
|
||||
.chart-wrapper {
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
top: 10px;
|
||||
left: 50%;
|
||||
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-root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.app-header {
|
||||
@ -26,12 +26,12 @@ app-root {
|
||||
.app-body {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-grow: 1;
|
||||
overflow-x: hidden;
|
||||
flex-grow: 1;
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@ -65,22 +65,22 @@ app-root {
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $sidebar-width;
|
||||
height: 100%;
|
||||
|
||||
.sidebar-nav {
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
// margin-top: - $navbar-height;
|
||||
|
||||
// .sidebar-nav {
|
||||
// height: calc(100vh - #{$navbar-height});
|
||||
// }
|
||||
}
|
||||
|
||||
.main, .app-footer {
|
||||
@ -88,7 +88,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -99,13 +98,8 @@ app-root {
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.sidebar-nav {
|
||||
height: calc(100vh - #{$navbar-height});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
@ -115,14 +109,12 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-compact-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-compact-width;
|
||||
}
|
||||
@ -132,7 +124,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -143,17 +134,20 @@ app-root {
|
||||
.sidebar-minimized {
|
||||
.sidebar {
|
||||
flex: 0 0 $sidebar-minimized-width;
|
||||
.sidebar-header,
|
||||
.sidebar-form,
|
||||
.sidebar-footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
}
|
||||
@ -163,7 +157,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -176,14 +169,12 @@ app-root {
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
|
||||
.aside-menu {
|
||||
margin-right: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
|
||||
.aside-menu {
|
||||
position: fixed;
|
||||
right: 0;
|
||||
@ -199,7 +190,6 @@ app-root {
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -223,7 +213,6 @@ app-root {
|
||||
// Breadcrumb
|
||||
//
|
||||
.breadcrumb-fixed {
|
||||
|
||||
.main {
|
||||
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
|
||||
padding-top: $breadcrumb-height;
|
||||
@ -283,7 +272,6 @@ app-root {
|
||||
// Footer
|
||||
//
|
||||
.footer-fixed {
|
||||
|
||||
.app-footer {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
@ -306,6 +294,9 @@ app-root {
|
||||
.aside-menu {
|
||||
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
|
||||
}
|
||||
.sidebar-nav {
|
||||
transition: width $layout-transition-speed;
|
||||
}
|
||||
.breadcrumb {
|
||||
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
|
||||
}
|
||||
@ -315,12 +306,13 @@ app-root {
|
||||
//
|
||||
|
||||
@include media-breakpoint-down(md) {
|
||||
|
||||
.app-header {
|
||||
.app-header.navbar {
|
||||
position: fixed !important;
|
||||
z-index: $zindex-sticky;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
background-color: $navbar-brand-bg;
|
||||
@include borders($navbar-brand-border);
|
||||
|
||||
.navbar-toggler {
|
||||
@if (lightness( $navbar-brand-bg ) > 40) {
|
||||
@ -343,6 +335,7 @@ app-root {
|
||||
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
z-index: $zindex-sticky - 1;
|
||||
width: $mobile-sidebar-width;
|
||||
height: 100%;
|
||||
margin-left: - $mobile-sidebar-width;
|
||||
@ -368,7 +361,6 @@ app-root {
|
||||
}
|
||||
|
||||
.sidebar-mobile-show {
|
||||
|
||||
.sidebar {
|
||||
width: $mobile-sidebar-width;
|
||||
margin-left: 0;
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
.app-header.navbar {
|
||||
position: relative;
|
||||
flex-direction: row;
|
||||
height: $navbar-height;
|
||||
flex-direction: row;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background-color: $navbar-bg;
|
||||
|
||||
@ -44,20 +44,17 @@
|
||||
// Sidebar
|
||||
//
|
||||
.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-right: - $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-right: 0;
|
||||
}
|
||||
@ -70,20 +67,18 @@
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.sidebar {
|
||||
margin-left: - $sidebar-minimized-width;
|
||||
margin-right: - $sidebar-minimized-width;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.sidebar-fixed {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: $sidebar-minimized-width;
|
||||
margin-right: $sidebar-minimized-width;
|
||||
}
|
||||
|
||||
&.sidebar-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -95,15 +90,13 @@
|
||||
// Aside Menu
|
||||
//
|
||||
.aside-menu-hidden {
|
||||
|
||||
.aside-menu {
|
||||
// margin-right: 0;
|
||||
margin-right: 0;
|
||||
margin-left: - $aside-menu-width;
|
||||
}
|
||||
}
|
||||
|
||||
.aside-menu-fixed {
|
||||
|
||||
.aside-menu {
|
||||
right: auto;
|
||||
left: 0;
|
||||
@ -115,7 +108,6 @@
|
||||
}
|
||||
|
||||
&.aside-menu-hidden {
|
||||
|
||||
.main, .app-footer {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -138,15 +130,12 @@
|
||||
// Sidebar Menu
|
||||
.sidebar {
|
||||
.sidebar-nav {
|
||||
direction: ltr;
|
||||
* {
|
||||
direction: rtl;
|
||||
}
|
||||
.nav {
|
||||
.nav-item {
|
||||
.nav-link {
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
margin-right: -4px;
|
||||
direction: rtl;
|
||||
i {
|
||||
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
|
||||
}
|
||||
.badge {
|
||||
float: left;
|
||||
@ -158,13 +147,14 @@
|
||||
position: absolute;
|
||||
right: auto !important;
|
||||
left: $sidebar-nav-link-padding-x;
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> .nav-link.nav-dropdown-toggle::before {
|
||||
transform: rotate(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 {
|
||||
|
||||
@ -249,6 +263,12 @@
|
||||
border: 0 solid $border-color;
|
||||
border-right-width: .25rem;
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
&.callout-#{$color} {
|
||||
border-right-color: $value;
|
||||
}
|
||||
}
|
||||
|
||||
.chart-wrapper {
|
||||
left: 0;
|
||||
float: left;
|
||||
@ -258,10 +278,4 @@
|
||||
.callout-default {
|
||||
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
|
||||
.sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: $sidebar-padding;
|
||||
overflow: hidden;
|
||||
color: $sidebar-color;
|
||||
background: $sidebar-bg;
|
||||
@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 {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
-ms-overflow-style: -ms-autohiding-scrollbar;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
margin-left: -10px;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-button { }
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background-color: lighten($sidebar-bg, 5%);
|
||||
border-right: 1px solid darken($sidebar-bg, 5%);
|
||||
border-left: 1px solid darken($sidebar-bg, 5%);
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-track-piece { }
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
height: 50px;
|
||||
background-color: darken($sidebar-bg, 10%);
|
||||
@ -57,15 +74,12 @@
|
||||
border-style: solid;
|
||||
border-width: 1px 2px;
|
||||
}
|
||||
|
||||
// &::-webkit-scrollbar-corner { }
|
||||
|
||||
// &::-webkit-resizer { }
|
||||
}
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-width);
|
||||
flex-direction: column !important;
|
||||
}
|
||||
|
||||
.nav-title {
|
||||
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
|
||||
@ -75,7 +89,7 @@
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.divider {
|
||||
.nav-divider, .divider {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
@ -83,15 +97,16 @@
|
||||
position: relative;
|
||||
margin: 0;
|
||||
transition: background .3s ease-in-out;
|
||||
}
|
||||
|
||||
ul {
|
||||
.nav-dropdown-items {
|
||||
max-height: 0;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow-y: hidden;
|
||||
transition: max-height .3s ease-in-out;
|
||||
|
||||
li {
|
||||
.nav-item {
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
@ -108,14 +123,18 @@
|
||||
border-radius: $border-radius;
|
||||
}
|
||||
|
||||
&: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;
|
||||
display: inline-block;
|
||||
width: 20px;
|
||||
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
|
||||
font-size: 14px;
|
||||
color: $sidebar-nav-link-icon-color;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
&.active {
|
||||
@ -128,54 +147,50 @@
|
||||
}
|
||||
}
|
||||
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
display: inline-block;
|
||||
margin-top: -4px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&:hover {
|
||||
color: $sidebar-nav-link-hover-color !important;
|
||||
background: $sidebar-nav-link-hover-bg !important;
|
||||
@include borders($sidebar-nav-link-hover-borders);
|
||||
|
||||
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;
|
||||
color: $sidebar-nav-link-hover-icon-color;
|
||||
}
|
||||
|
||||
.badge {
|
||||
float: right;
|
||||
margin-top: 2px;
|
||||
// margin-left: 10px;
|
||||
&.nav-dropdown-toggle::before {
|
||||
background-image: $sidebar-nav-dropdown-indicator-hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown-toggle {
|
||||
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
|
||||
.nav-dropdown-toggle {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: ($sidebar-nav-link-padding-y + ($font-size-base / 4));
|
||||
top: 50%;
|
||||
right: $sidebar-nav-link-padding-x;
|
||||
display: block;
|
||||
width: ($font-size-base);
|
||||
height: ($font-size-base);
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
font-size: $font-size-base;
|
||||
line-height: ($font-size-base * 3 / 4);
|
||||
text-align: center;
|
||||
content: "\2039";
|
||||
transition: .3s;
|
||||
}
|
||||
margin-top: -4px;
|
||||
content: "";
|
||||
background-image: $sidebar-nav-dropdown-indicator;
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
transition: transform .3s;
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
// 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;
|
||||
}
|
||||
> ul, > ol {
|
||||
// display: inline;
|
||||
> .nav-dropdown-items {
|
||||
max-height: 1000px;
|
||||
}
|
||||
|
||||
@ -192,21 +207,6 @@
|
||||
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;
|
||||
@ -233,7 +233,11 @@
|
||||
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 {
|
||||
.hidden-cn {
|
||||
display: none;
|
||||
@ -290,10 +295,6 @@
|
||||
.sidebar {
|
||||
z-index: $zindex-sticky - 1;
|
||||
|
||||
&:hover {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.sidebar-nav {
|
||||
overflow: visible;
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
@ -301,8 +302,13 @@
|
||||
|
||||
.nav {
|
||||
@include sidebar-width($sidebar-borders, $sidebar-minimized-width);
|
||||
}
|
||||
|
||||
.nav-title, .divider {
|
||||
.nav-divider, .divider,
|
||||
.nav-title,
|
||||
.sidebar-footer,
|
||||
.sidebar-form,
|
||||
.sidebar-header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -311,8 +317,18 @@
|
||||
overflow: hidden;
|
||||
border-left: 0 !important;
|
||||
|
||||
ul {
|
||||
background: $sidebar-bg;
|
||||
&: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 {
|
||||
@ -322,86 +338,37 @@
|
||||
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;
|
||||
// padding: 0;
|
||||
// margin: 0 !important;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
// top: 14px;
|
||||
right: 15px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: $sidebar-width;
|
||||
width: $sidebar-width + $sidebar-minimized-width;
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
|
||||
.badge {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
|
||||
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 {
|
||||
&.nav-dropdown-toggle::before {
|
||||
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 {
|
||||
.nav-dropdown-items {
|
||||
.nav-item {
|
||||
width: $sidebar-width;
|
||||
|
||||
.nav-link {
|
||||
@ -410,16 +377,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
&.nav-dropdown {
|
||||
&.open {
|
||||
> ul, > ol {
|
||||
.nav > .nav-dropdown {
|
||||
> .nav-dropdown-items {
|
||||
display: none;
|
||||
max-height: 1000px;
|
||||
background: $sidebar-bg;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: $sidebar-nav-link-hover-bg;
|
||||
> .nav-dropdown-items {
|
||||
position: absolute;
|
||||
left: $sidebar-minimized-width;
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -16,25 +16,12 @@
|
||||
|
||||
// Open state for the dropdown
|
||||
.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
|
||||
> a {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
//.modal-open .modal {
|
||||
// display: block;
|
||||
//}
|
||||
|
||||
// navbar dropdown fix
|
||||
.navbar .dropdown-toggle {
|
||||
@extend .nav-link;
|
||||
|
||||
@ -72,11 +72,23 @@ $sidebar-compact-width: 150px !default;
|
||||
$sidebar-compact-height: $sidebar-compact-width !default;
|
||||
$sidebar-color: #fff !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;
|
||||
$mobile-sidebar-width: 220px !default;
|
||||
|
||||
// Sidebar Header
|
||||
|
||||
$sidebar-header-height: auto !default;
|
||||
$sidebar-header-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-header-padding-y: .75rem !default;
|
||||
$sidebar-header-padding-x: 1rem !default;
|
||||
|
||||
// Sidebar Form
|
||||
|
||||
$sidebar-form-border: 0 !default;
|
||||
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
|
||||
$sidebar-form-color: #fff !default;
|
||||
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
|
||||
|
||||
// Sidebar Navigation
|
||||
|
||||
$sidebar-nav-color: #fff !default;
|
||||
@ -87,7 +99,7 @@ $sidebar-nav-link-padding-y: .75rem !default;
|
||||
$sidebar-nav-link-padding-x: 1rem !default;
|
||||
$sidebar-nav-link-color: #fff !default;
|
||||
$sidebar-nav-link-bg: transparent !default;
|
||||
$sidebar-nav-link-icon-color: $text-muted !default;
|
||||
$sidebar-nav-link-icon-color: $gray-600 !default;
|
||||
$sidebar-nav-link-borders: 0 !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-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-nav-dropdown-borders: 0 !default;
|
||||
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
|
||||
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
|
||||
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
|
||||
|
||||
// Sidebar Footer
|
||||
|
||||
$sidebar-footer-height: auto !default;
|
||||
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
|
||||
$sidebar-footer-padding-y: .75rem !default;
|
||||
$sidebar-footer-padding-x: 1rem !default;
|
||||
|
||||
// Top Navigation
|
||||
|
||||
@ -131,6 +154,7 @@ $top-nav-height: $navbar-height - 15px !default;
|
||||
|
||||
// Breadcrumb
|
||||
|
||||
$breadcrumb-margin: 0 0 (1.5 * $spacer) 0 !default;
|
||||
$breadcrumb-borders: (
|
||||
bottom: (
|
||||
size: 1px,
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
/**
|
||||
* CoreUI - Open Source Bootstrap Admin Template
|
||||
* @version v1.0.0-alpha.6
|
||||
* @version v1.0.0
|
||||
* @link http://coreui.io
|
||||
* Copyright (c) 2017 creativeLabs Łukasz Holeczek
|
||||
* @license MIT
|
||||
@ -20,14 +20,14 @@
|
||||
// Import Bootstrap source files from bower_components
|
||||
// @import "bower_components/bootstrap/scss/bootstrap";
|
||||
|
||||
// Import vendors styles
|
||||
@import "vendors/vendors";
|
||||
|
||||
// Override core variables
|
||||
@import "core-variables";
|
||||
|
||||
// Import core styles
|
||||
@import "core/core";
|
||||
|
||||
// Import vendors styles
|
||||
@import "vendors/vendors";
|
||||
|
||||
// Custom styles
|
||||
@import "custom";
|
||||
|
||||
@ -33,7 +33,7 @@ class Header extends Component {
|
||||
<header className="app-header navbar">
|
||||
<NavbarToggler className="d-lg-none" onClick={this.mobileSidebarToggle}>☰</NavbarToggler>
|
||||
<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>
|
||||
)
|
||||
}
|
||||
|
||||
@ -2,7 +2,10 @@ import React, {Component} from 'react';
|
||||
import {NavLink} from 'react-router-dom';
|
||||
import {Badge, Nav, NavItem} from 'reactstrap';
|
||||
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 {
|
||||
|
||||
@ -38,7 +41,7 @@ class Sidebar extends Component {
|
||||
};
|
||||
|
||||
// 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
|
||||
const title = (title, key) => {
|
||||
@ -65,7 +68,7 @@ class Sidebar extends Component {
|
||||
const navDropdown = (item, key) => {
|
||||
return (
|
||||
<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">
|
||||
{navList(item.children)}
|
||||
</ul>
|
||||
@ -87,11 +90,14 @@ class Sidebar extends Component {
|
||||
// sidebar-nav root
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<SidebarHeader/>
|
||||
<SidebarForm/>
|
||||
<nav className="sidebar-nav">
|
||||
<Nav>
|
||||
{navList(nav.items)}
|
||||
</Nav>
|
||||
</nav>
|
||||
<SidebarFooter/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
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 ReactDOM from 'react-dom';
|
||||
import {HashRouter, Route, Switch} from 'react-router-dom';
|
||||
import {createBrowserHistory} from 'history';
|
||||
|
||||
// Styles
|
||||
// Import Font Awesome Icons Set
|
||||
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 Main styles for this application
|
||||
import '../scss/style.scss'
|
||||
// Temp fix for reactstrap
|
||||
import '../scss/core/_dropdown-menu-right.scss'
|
||||
|
||||
// Containers
|
||||
import Full from './containers/Full/'
|
||||
|
||||
const history = createBrowserHistory();
|
||||
|
||||
ReactDOM.render((
|
||||
<HashRouter history={history}>
|
||||
<HashRouter>
|
||||
<Switch>
|
||||
<Route path="/" name="Home" component={Full}/>
|
||||
</Switch>
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
{
|
||||
"name": "coreui.io-react",
|
||||
"version": "1.0.0-alpha.6",
|
||||
"version": "1.0.0",
|
||||
"description": "Open Source React Admin Template",
|
||||
"main": "",
|
||||
"homepage": "http://coreui.io",
|
||||
"homepage": "http://coreui.io/react/",
|
||||
"github": "https://github.com/mrholek/CoreUI-React#readme",
|
||||
"scripts": {
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
|
||||
Loading…
Reference in New Issue
Block a user