sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

v1.0.0

Browse Source
This commit is contained in:
Łukasz Holeczek
2017-09-22 11:09:17 +02:00
parent 38ef22c96d
commit 5271e28c36
41 changed files with 906 additions and 18256 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+4 -4
View File
@@ -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 Vue & 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 the CoreUI consists bunch of unique features and over 1000 high quality icons.
CoreUI is an Open Source Vue & 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!
[![CoreUI Vue Free Bootstrap Admin Template](http://coreui.io/assets/img/coreui.png "CoreUI Vue Free Bootstrap Admin Template")](http://coreui.io)
@@ -28,7 +28,7 @@ A fully functional demo is available at [CoreUI](http://coreui.io/)
## What's included
Within the download you'll find the following directories and files, you'll see something like this:
Within the download you'll find the following directories and files:
```
CoreUI-Vue/
Vue_Full_Project/gulpfile.js
-22
View File
@@ -1,22 +0,0 @@
'use strict'
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./scss/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest('./static/css'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('./static/css'));
});
// Watching SCSS files
gulp.task('sass:watch', function () {
gulp.watch('./scss/**/*.scss', ['sass']);
});
gulp.task('default', ['sass:watch']);
Vue_Full_Project/package.json
+23 -23
View File
@@ -1,6 +1,6 @@
{
"name": "coreui-vue",
"version": "1.0.0-alpha.6",
"version": "1.0.0",
"description": "Open Source Admin Template",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"private": true,
@@ -14,18 +14,18 @@
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"bootstrap-vue": "^0.23.0",
"chart.js": "2.6.0",
"vue": "2.4.2",
"vue-chartjs": "2.8.2",
"vue-router": "2.7.0",
"bootstrap-vue": "1.0.0-beta.7",
"chart.js": "2.7.0",
"font-awesome": "^4.7.0",
"simple-line-icons": "^2.4.1"
"simple-line-icons": "^2.4.1",
"vue": "2.4.4",
"vue-chartjs": "2.8.7",
"vue-router": "2.7.0"
},
"devDependencies": {
"autoprefixer": "7.1.3",
"autoprefixer": "7.1.4",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-eslint": "8.0.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "1.6.0",
@@ -35,10 +35,10 @@
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "0.28.7",
"eslint": "4.5.0",
"eslint": "4.7.1",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-html": "3.2.0",
"eslint-plugin-html": "3.2.2",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-node": "5.1.1",
"eslint-config-standard": "10.2.1",
@@ -63,30 +63,30 @@
"karma-spec-reporter": "0.0.31",
"karma-webpack": "2.0.4",
"lolex": "2.1.2",
"mocha": "3.5.0",
"mocha": "3.5.3",
"chai": "4.1.2",
"sinon": "3.2.1",
"sinon": "3.3.0",
"sinon-chai": "2.13.0",
"inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.4",
"babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "2.32.0",
"chromedriver": "2.32.3",
"cross-spawn": "^5.0.1",
"nightwatch": "0.9.16",
"selenium-server": "3.5.2",
"selenium-server": "3.5.3",
"semver": "5.4.1",
"shelljs": "0.7.8",
"opn": "5.1.0",
"optimize-css-assets-webpack-plugin": "3.1.1",
"optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.3.0",
"rimraf": "^2.6.0",
"rimraf": "2.6.2",
"url-loader": "0.5.9",
"vue-loader": "13.0.4",
"vue-style-loader": "3.0.1",
"vue-template-compiler": "2.4.2",
"webpack": "3.5.5",
"vue-loader": "13.0.5",
"vue-style-loader": "3.0.3",
"vue-template-compiler": "2.4.4",
"webpack": "3.6.0",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.18.2",
"webpack-hot-middleware": "2.19.1",
"webpack-merge": "4.1.0",
"node-sass": "4.5.3",
"sass-loader": "6.0.6"
Vue_Full_Project/scss/core/_breadcrumb.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
margin-bottom: 1.5 * $spacer;
margin: $breadcrumb-margin;
@include borders($breadcrumb-borders);
}
Vue_Full_Project/scss/core/_dropdown-menu-right.scss
+7
View File
@@ -0,0 +1,7 @@
// Temp fix for reactstrap
.show {
> .dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
}
Vue_Full_Project/scss/core/_layout.scss
+22 -30
View File
@@ -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%;
height: calc(100vh - #{$navbar-height});
// margin-top: - $navbar-height;
.sidebar-nav {
height: calc(100vh - #{$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,12 +98,7 @@ app-root {
.sidebar {
position: fixed;
z-index: $zindex-sticky - 1;
height: 100%;
.sidebar-nav {
height: calc(100vh - #{$navbar-height});
}
height: calc(100vh - #{$navbar-height});
}
}
@@ -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;
Vue_Full_Project/scss/core/_navbar.scss
+1 -1
View File
@@ -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;
Vue_Full_Project/scss/core/_rtl.scss
+39 -25
View File
@@ -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;
}
}
}
Vue_Full_Project/scss/core/_sidebar.scss
+248 -275
View File
@@ -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,183 +74,170 @@
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;
font-size: 11px;
font-weight: 600;
color: $sidebar-nav-title-color;
text-transform: uppercase;
}
.nav-title {
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
font-size: 11px;
font-weight: 600;
color: $sidebar-nav-title-color;
text-transform: uppercase;
}
.divider {
height: 10px;
}
.nav-divider, .divider {
height: 10px;
}
.nav-item {
position: relative;
margin: 0;
transition: background .3s ease-in-out;
}
.nav-dropdown-items {
max-height: 0;
padding: 0;
margin: 0;
overflow-y: hidden;
transition: max-height .3s ease-in-out;
.nav-item {
position: relative;
margin: 0;
transition: background .3s ease-in-out;
padding: 0;
list-style: none;
}
}
ul {
max-height: 0;
padding: 0;
margin: 0;
overflow-y: hidden;
transition: max-height .3s ease-in-out;
.nav-link {
display: block;
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
color: $sidebar-nav-link-color;
text-decoration: none;
background: $sidebar-nav-link-bg;
@include borders($sidebar-nav-link-borders);
@if $enable-sidebar-nav-rounded {
border-radius: $border-radius;
}
li {
padding: 0;
list-style: none;
}
}
i {
display: inline-block;
width: 20px;
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
font-size: 14px;
color: $sidebar-nav-link-icon-color;
text-align: center;
}
.nav-link {
display: block;
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
color: $sidebar-nav-link-color;
text-decoration: none;
background: $sidebar-nav-link-bg;
@include borders($sidebar-nav-link-borders);
@if $enable-sidebar-nav-rounded {
border-radius: $border-radius;
}
.badge {
float: right;
margin-top: 2px;
}
&:hover {
color: $sidebar-nav-link-hover-color !important;
background: $sidebar-nav-link-hover-bg !important;
@include borders($sidebar-nav-link-hover-borders);
&.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-hover-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;
}
i {
color: $sidebar-nav-link-active-icon-color;
}
}
&: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 {
.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,122 +302,94 @@
.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;
}
.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;
}
.nav-item {
width: $sidebar-minimized-width;
overflow: hidden;
border-left: 0 !important;
&:hover {
width: $sidebar-width + $sidebar-minimized-width;
background: $sidebar-nav-link-hover-bg;
ul {
background: $sidebar-bg;
.badge {
display: inline;
}
}
&.nav-dropdown-toggle::before {
display: none;
}
}
.nav-dropdown-items {
.nav-item {
width: $sidebar-width;
.nav-link {
position: relative;
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;
}
}
width: $sidebar-width;
}
}
}
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;
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 {
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;
}
}
}
display: inline;
}
}
}
Vue_Full_Project/scss/core/_temp.scss
-13
View File
@@ -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;
Vue_Full_Project/scss/core/_variables.scss
+27 -3
View File
@@ -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,
Vue_Full_Project/scss/style.scss
+4 -4
View File
@@ -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";
Vue_Full_Project/src/App.vue
+9 -7
View File
@@ -9,14 +9,16 @@ export default {
</script>
<style>
// Import Font Awesome Icons Set
$fa-font-path: "~font-awesome/fonts/";
@import "~font-awesome/css/font-awesome.min.css";
// Import Simple Line Icons Set
$simple-line-font-path: "~simple-line-icons/fonts/";
@import "~simple-line-icons/css/simple-line-icons.css";
/* Import Font Awesome Icons Set */
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/css/font-awesome.min.css';
/* Import Simple Line Icons Set */
$simple-line-font-path: '~simple-line-icons/fonts/';
@import '~simple-line-icons/css/simple-line-icons.css';
/* Import Bootstrap Vue Styles */
@import '~bootstrap-vue/dist/bootstrap-vue.css';
</style>
<style lang="scss">
// Import Main styles for this application
@import "./scss/style";
@import './scss/style';
</style>
Vue_Full_Project/src/components/Sidebar.vue
+22 -10
View File
@@ -1,9 +1,11 @@
<template>
<div class="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav class="sidebar-nav">
<div slot="header"></div>
<ul class="nav">
<li class="nav-item" v-for="(item, index) in navItems">
<template v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
@@ -12,35 +14,42 @@
</template>
<template v-else>
<template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(child, index) in item.children">
<template v-if="child.children">
<SidebarNavDropdown :name="child.name" :url="child.url" :icon="child.icon">
<li class="nav-item" v-for="(child, index) in item.children">
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
<template v-for="(childL1, index) in item.children">
<template v-if="childL1.children">
<!-- Second level dropdown -->
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<li class="nav-item" v-for="(childL2, index) in childL1.children">
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge"/>
</li>
</SidebarNavDropdown>
</template>
<template v-else>
<li class="nav-item">
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge"/>
</li>
</template>
</template>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
<li class="nav-item">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
</li>
</template>
</template>
</li>
</template>
</ul>
<slot></slot>
<div slot="footer"></div>
</nav>
<SidebarFooter/>
</div>
</template>
<script>
import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
@@ -54,6 +63,9 @@ export default {
}
},
components: {
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarNavDropdown,
SidebarNavLink,
SidebarNavTitle
Vue_Full_Project/src/components/SidebarFooter.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-footer"></div> -->
</template>
<script>
export default {
name: 'sidebar-footer'
}
</script>
Vue_Full_Project/src/components/SidebarForm.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-form"></div> -->
</template>
<script>
export default {
name: 'sidebar-form'
}
</script>
Vue_Full_Project/src/components/SidebarHeader.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-header"></div> -->
</template>
<script>
export default {
name: 'sidebar-header'
}
</script>
Vue_Full_Project/src/components/SidebarNavLink.vue
+1 -1
View File
@@ -1,7 +1,7 @@
<template>
<router-link :to="url" class="nav-link">
<i :class="icon"></i> {{name}}
<b-badge :variant="badge.variant">{{badge.text}}</b-badge>
<b-badge v-if="badge.text" :variant="badge.variant">{{badge.text}}</b-badge>
</router-link>
</template>
Vue_Full_Project/src/views/Dashboard.vue
+4 -4
View File
@@ -2,7 +2,7 @@
<div class="animated fadeIn">
<div class="row">
<div class="col-sm-6 col-lg-3">
<b-card class="bg-primary" :no-block="true">
<b-card class="bg-primary" :no-body="true">
<div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
@@ -20,7 +20,7 @@
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<b-card class="bg-info" :no-block="true">
<b-card class="bg-info" :no-body="true">
<div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
@@ -38,7 +38,7 @@
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<b-card class="bg-warning" :no-block="true">
<b-card class="bg-warning" :no-body="true">
<div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
@@ -56,7 +56,7 @@
</b-card>
</div><!--/.col-->
<div class="col-sm-6 col-lg-3">
<b-card class="bg-danger" :no-block="true">
<b-card class="bg-danger" :no-body="true">
<div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content">
Vue_Full_Project/src/views/Widgets.vue
+16 -16
View File
@@ -70,7 +70,7 @@
</div><!--/.row-->
<div class="row">
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-3 clearfix">
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
@@ -79,7 +79,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-3 clearfix">
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
@@ -88,7 +88,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-3 clearfix">
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
@@ -97,7 +97,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-3 clearfix">
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
@@ -106,7 +106,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block footer-class="px-3 py-2">
<b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix">
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
@@ -118,7 +118,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block footer-class="px-3 py-2">
<b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix">
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 mt-2">$1.999,50</div>
@@ -130,7 +130,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block footer-class="px-3 py-2">
<b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix">
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
@@ -142,7 +142,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block footer-class="px-3 py-2">
<b-card :no-body="true" footer-class="px-3 py-2">
<div class="card-body p-3 clearfix">
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
@@ -156,7 +156,7 @@
</div><!--/.row-->
<div class="row">
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
@@ -165,7 +165,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
@@ -174,7 +174,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
@@ -183,7 +183,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
@@ -192,7 +192,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-cogs bg-primary p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
@@ -201,7 +201,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-laptop bg-info p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-info mb-0 pt-3">$1.999,50</div>
@@ -210,7 +210,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-moon-o bg-warning p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
@@ -219,7 +219,7 @@
</b-card>
</div><!--/.col-->
<div class="col-6 col-lg-3">
<b-card no-block>
<b-card :no-body="true">
<div class="card-body p-0 clearfix">
<i class="fa fa-bell bg-danger p-4 px-5 font-2xl mr-3 float-left"></i>
<div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
Vue_Full_Project/src/views/components/Forms.vue
+1 -1
View File
@@ -94,7 +94,7 @@
label="Static"
:label-cols="3"
:horizontal="true">
<b-form-input-static type="text" value="Username"></b-form-input-static>
<b-form-input plaintext type="text" value="Username"></b-form-input>
</b-form-fieldset>
<b-form-fieldset
description="This is a help text"
Vue_Full_Project/static/css/style.css
-8698
View File
File diff suppressed because it is too large Load Diff
Vue_Starter/gulpfile.js
-22
View File
@@ -1,22 +0,0 @@
'use strict'
var gulp = require('gulp');
var concat = require('gulp-concat');
var sass = require('gulp-sass');
gulp.task('sass', function () {
return gulp.src('./scss/style.scss')
.pipe(sass().on('error', sass.logError))
.pipe(concat('style.css'))
.pipe(gulp.dest('./static/css'))
.pipe(sass({outputStyle: 'compressed'}))
.pipe(concat('style.min.css'))
.pipe(gulp.dest('./static/css'));
});
// Watching SCSS files
gulp.task('sass:watch', function () {
gulp.watch('./scss/**/*.scss', ['sass']);
});
gulp.task('default', ['sass:watch']);
Vue_Starter/package.json
+23 -23
View File
@@ -1,6 +1,6 @@
{
"name": "coreui-vue",
"version": "1.0.0-alpha.6",
"version": "1.0.0",
"description": "Open Source Admin Template",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"private": true,
@@ -14,18 +14,18 @@
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
},
"dependencies": {
"bootstrap-vue": "^0.23.0",
"chart.js": "2.6.0",
"vue": "2.4.2",
"vue-chartjs": "2.8.2",
"vue-router": "2.7.0",
"bootstrap-vue": "1.0.0-beta.7",
"chart.js": "2.7.0",
"font-awesome": "^4.7.0",
"simple-line-icons": "^2.4.1"
"simple-line-icons": "^2.4.1",
"vue": "2.4.4",
"vue-chartjs": "2.8.7",
"vue-router": "2.7.0"
},
"devDependencies": {
"autoprefixer": "7.1.3",
"autoprefixer": "7.1.4",
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-eslint": "8.0.0",
"babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "1.6.0",
@@ -35,10 +35,10 @@
"connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "0.28.7",
"eslint": "4.5.0",
"eslint": "4.7.1",
"eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.0",
"eslint-plugin-html": "3.2.0",
"eslint-plugin-html": "3.2.2",
"eslint-plugin-import": "2.7.0",
"eslint-plugin-node": "5.1.1",
"eslint-config-standard": "10.2.1",
@@ -63,30 +63,30 @@
"karma-spec-reporter": "0.0.31",
"karma-webpack": "2.0.4",
"lolex": "2.1.2",
"mocha": "3.5.0",
"mocha": "3.5.3",
"chai": "4.1.2",
"sinon": "3.2.1",
"sinon": "3.3.0",
"sinon-chai": "2.13.0",
"inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.4",
"babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15",
"chromedriver": "2.32.0",
"chromedriver": "2.32.3",
"cross-spawn": "^5.0.1",
"nightwatch": "0.9.16",
"selenium-server": "3.5.2",
"selenium-server": "3.5.3",
"semver": "5.4.1",
"shelljs": "0.7.8",
"opn": "5.1.0",
"optimize-css-assets-webpack-plugin": "3.1.1",
"optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.3.0",
"rimraf": "^2.6.0",
"rimraf": "2.6.2",
"url-loader": "0.5.9",
"vue-loader": "13.0.4",
"vue-style-loader": "3.0.1",
"vue-template-compiler": "2.4.2",
"webpack": "3.5.5",
"vue-loader": "13.0.5",
"vue-style-loader": "3.0.3",
"vue-template-compiler": "2.4.4",
"webpack": "3.6.0",
"webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.18.2",
"webpack-hot-middleware": "2.19.1",
"webpack-merge": "4.1.0",
"node-sass": "4.5.3",
"sass-loader": "6.0.6"
Vue_Starter/scss/core/_breadcrumb.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
margin-bottom: 1.5 * $spacer;
margin: $breadcrumb-margin;
@include borders($breadcrumb-borders);
}
Vue_Starter/scss/core/_dropdown-menu-right.scss
+7
View File
@@ -0,0 +1,7 @@
// Temp fix for reactstrap
.show {
> .dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
}
Vue_Starter/scss/core/_layout.scss
+22 -30
View File
@@ -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%;
height: calc(100vh - #{$navbar-height});
// margin-top: - $navbar-height;
.sidebar-nav {
height: calc(100vh - #{$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,12 +98,7 @@ app-root {
.sidebar {
position: fixed;
z-index: $zindex-sticky - 1;
height: 100%;
.sidebar-nav {
height: calc(100vh - #{$navbar-height});
}
height: calc(100vh - #{$navbar-height});
}
}
@@ -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;
Vue_Starter/scss/core/_navbar.scss
+1 -1
View File
@@ -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;
Vue_Starter/scss/core/_rtl.scss
+39 -25
View File
@@ -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;
}
}
}
Vue_Starter/scss/core/_sidebar.scss
+248 -275
View File
@@ -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,183 +74,170 @@
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;
font-size: 11px;
font-weight: 600;
color: $sidebar-nav-title-color;
text-transform: uppercase;
}
.nav-title {
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
font-size: 11px;
font-weight: 600;
color: $sidebar-nav-title-color;
text-transform: uppercase;
}
.divider {
height: 10px;
}
.nav-divider, .divider {
height: 10px;
}
.nav-item {
position: relative;
margin: 0;
transition: background .3s ease-in-out;
}
.nav-dropdown-items {
max-height: 0;
padding: 0;
margin: 0;
overflow-y: hidden;
transition: max-height .3s ease-in-out;
.nav-item {
position: relative;
margin: 0;
transition: background .3s ease-in-out;
padding: 0;
list-style: none;
}
}
ul {
max-height: 0;
padding: 0;
margin: 0;
overflow-y: hidden;
transition: max-height .3s ease-in-out;
.nav-link {
display: block;
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
color: $sidebar-nav-link-color;
text-decoration: none;
background: $sidebar-nav-link-bg;
@include borders($sidebar-nav-link-borders);
@if $enable-sidebar-nav-rounded {
border-radius: $border-radius;
}
li {
padding: 0;
list-style: none;
}
}
i {
display: inline-block;
width: 20px;
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
font-size: 14px;
color: $sidebar-nav-link-icon-color;
text-align: center;
}
.nav-link {
display: block;
padding: $sidebar-nav-link-padding-y $sidebar-nav-link-padding-x;
color: $sidebar-nav-link-color;
text-decoration: none;
background: $sidebar-nav-link-bg;
@include borders($sidebar-nav-link-borders);
@if $enable-sidebar-nav-rounded {
border-radius: $border-radius;
}
.badge {
float: right;
margin-top: 2px;
}
&:hover {
color: $sidebar-nav-link-hover-color !important;
background: $sidebar-nav-link-hover-bg !important;
@include borders($sidebar-nav-link-hover-borders);
&.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-hover-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;
}
i {
color: $sidebar-nav-link-active-icon-color;
}
}
&: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 {
.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,122 +302,94 @@
.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;
}
.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;
}
.nav-item {
width: $sidebar-minimized-width;
overflow: hidden;
border-left: 0 !important;
&:hover {
width: $sidebar-width + $sidebar-minimized-width;
background: $sidebar-nav-link-hover-bg;
ul {
background: $sidebar-bg;
.badge {
display: inline;
}
}
&.nav-dropdown-toggle::before {
display: none;
}
}
.nav-dropdown-items {
.nav-item {
width: $sidebar-width;
.nav-link {
position: relative;
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;
}
}
width: $sidebar-width;
}
}
}
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;
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 {
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;
}
}
}
display: inline;
}
}
}
Vue_Starter/scss/core/_temp.scss
-13
View File
@@ -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;
Vue_Starter/scss/core/_variables.scss
+27 -3
View File
@@ -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,
Vue_Starter/scss/style.scss
+4 -4
View File
@@ -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";
Vue_Starter/src/App.vue
+9 -8
View File
@@ -9,15 +9,16 @@ export default {
</script>
<style>
// Import Font Awesome Icons Set
$fa-font-path: "~font-awesome/fonts/";
@import "~font-awesome/css/font-awesome.min.css";
// Import Simple Line Icons Set
$simple-line-font-path: "~simple-line-icons/fonts/";
@import "~simple-line-icons/css/simple-line-icons.css";
/* Import Font Awesome Icons Set */
$fa-font-path: '~font-awesome/fonts/';
@import '~font-awesome/css/font-awesome.min.css';
/* Import Simple Line Icons Set */
$simple-line-font-path: '~simple-line-icons/fonts/';
@import '~simple-line-icons/css/simple-line-icons.css';
/* Import Bootstrap Vue Styles */
@import '~bootstrap-vue/dist/bootstrap-vue.css';
</style>
<style lang="scss">
// Import Main styles for this application
@import "./scss/style";
@import './scss/style';
</style>
Vue_Starter/src/components/Sidebar.vue
+23 -11
View File
@@ -1,46 +1,55 @@
<template>
<div class="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav class="sidebar-nav">
<div slot="header"></div>
<ul class="nav">
<li class="nav-item" v-for="(item, index) in navItems">
<template v-for="(item, index) in navItems">
<template v-if="item.title">
<SidebarNavTitle :name="item.name"/>
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template>
<template v-else-if="item.divider">
<li class="divider"></li>
</template>
<template v-else>
<template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(child, index) in item.children">
<template v-if="child.children">
<SidebarNavDropdown :name="child.name" :url="child.url" :icon="child.icon">
<li class="nav-item" v-for="(child, index) in item.children">
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
<template v-for="(childL1, index) in item.children">
<template v-if="childL1.children">
<!-- Second level dropdown -->
<SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<li class="nav-item" v-for="(childL2, index) in childL1.children">
<SidebarNavLink :name="childL2.name" :url="childL2.url" :icon="childL2.icon" :badge="childL2.badge"/>
</li>
</SidebarNavDropdown>
</template>
<template v-else>
<li class="nav-item">
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/>
<SidebarNavLink :name="childL1.name" :url="childL1.url" :icon="childL1.icon" :badge="childL1.badge"/>
</li>
</template>
</template>
</SidebarNavDropdown>
</template>
<template v-else>
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
<li class="nav-item">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
</li>
</template>
</template>
</li>
</template>
</ul>
<slot></slot>
<div slot="footer"></div>
</nav>
<SidebarFooter/>
</div>
</template>
<script>
import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle'
@@ -54,6 +63,9 @@ export default {
}
},
components: {
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarNavDropdown,
SidebarNavLink,
SidebarNavTitle
Vue_Starter/src/components/SidebarFooter.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-footer"></div> -->
</template>
<script>
export default {
name: 'sidebar-footer'
}
</script>
Vue_Starter/src/components/SidebarForm.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-form"></div> -->
</template>
<script>
export default {
name: 'sidebar-form'
}
</script>
Vue_Starter/src/components/SidebarHeader.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<!-- <div class="sidebar-header"></div> -->
</template>
<script>
export default {
name: 'sidebar-header'
}
</script>
Vue_Starter/src/components/SidebarNavTitle.vue
+17 -2
View File
@@ -1,6 +1,13 @@
<template>
<li class="nav-title">
{{name}}
<li class="nav-title" v-bind:class="classes">
<template v-if="wrapper && wrapper.element">
<component v-bind:is="wrapper.element" v-bind="wrapper.attributes">
{{name}}
</component>
</template>
<template v-else>
{{name}}
</template>
</li>
</template>
@@ -10,6 +17,14 @@ export default {
name: {
type: String,
default: ''
},
classes: {
type: String,
default: ''
},
wrapper: {
type: Object,
default: () => {}
}
}
}
Vue_Starter/static/css/style.css
-8698
View File
File diff suppressed because it is too large Load Diff
package.json
+2 -2
View File
@@ -1,9 +1,9 @@
{
"name": "coreui.io-vue",
"version": "1.0.0-alpha.6",
"version": "1.0.0",
"description": "Open Source Vue Admin Template",
"main": "",
"homepage": "http://coreui.io",
"homepage": "http://coreui.io/vue/",
"github": "https://github.com/mrholek/CoreUI-Vue#readme",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"