sean/manja_dev_ui
1
0
Fork 0
Code Issues Pull Requests Actions 3 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) 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) [![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 ## 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/ 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", "name": "coreui-vue",
"version": "1.0.0-alpha.6", "version": "1.0.0",
"description": "Open Source Admin Template", "description": "Open Source Admin Template",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>", "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"private": true, "private": true,
@@ -14,18 +14,18 @@
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
}, },
"dependencies": { "dependencies": {
"bootstrap-vue": "^0.23.0", "bootstrap-vue": "1.0.0-beta.7",
"chart.js": "2.6.0", "chart.js": "2.7.0",
"vue": "2.4.2",
"vue-chartjs": "2.8.2",
"vue-router": "2.7.0",
"font-awesome": "^4.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": { "devDependencies": {
"autoprefixer": "7.1.3", "autoprefixer": "7.1.4",
"babel-core": "6.26.0", "babel-core": "6.26.0",
"babel-eslint": "7.2.3", "babel-eslint": "8.0.0",
"babel-loader": "7.1.2", "babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "1.6.0", "babel-preset-env": "1.6.0",
@@ -35,10 +35,10 @@
"connect-history-api-fallback": "^1.3.0", "connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1", "copy-webpack-plugin": "^4.0.1",
"css-loader": "0.28.7", "css-loader": "0.28.7",
"eslint": "4.5.0", "eslint": "4.7.1",
"eslint-friendly-formatter": "3.0.0", "eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.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-import": "2.7.0",
"eslint-plugin-node": "5.1.1", "eslint-plugin-node": "5.1.1",
"eslint-config-standard": "10.2.1", "eslint-config-standard": "10.2.1",
@@ -63,30 +63,30 @@
"karma-spec-reporter": "0.0.31", "karma-spec-reporter": "0.0.31",
"karma-webpack": "2.0.4", "karma-webpack": "2.0.4",
"lolex": "2.1.2", "lolex": "2.1.2",
"mocha": "3.5.0", "mocha": "3.5.3",
"chai": "4.1.2", "chai": "4.1.2",
"sinon": "3.2.1", "sinon": "3.3.0",
"sinon-chai": "2.13.0", "sinon-chai": "2.13.0",
"inject-loader": "3.0.1", "inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.4", "babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15", "phantomjs-prebuilt": "^2.1.15",
"chromedriver": "2.32.0", "chromedriver": "2.32.3",
"cross-spawn": "^5.0.1", "cross-spawn": "^5.0.1",
"nightwatch": "0.9.16", "nightwatch": "0.9.16",
"selenium-server": "3.5.2", "selenium-server": "3.5.3",
"semver": "5.4.1", "semver": "5.4.1",
"shelljs": "0.7.8", "shelljs": "0.7.8",
"opn": "5.1.0", "opn": "5.1.0",
"optimize-css-assets-webpack-plugin": "3.1.1", "optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.3.0", "ora": "1.3.0",
"rimraf": "^2.6.0", "rimraf": "2.6.2",
"url-loader": "0.5.9", "url-loader": "0.5.9",
"vue-loader": "13.0.4", "vue-loader": "13.0.5",
"vue-style-loader": "3.0.1", "vue-style-loader": "3.0.3",
"vue-template-compiler": "2.4.2", "vue-template-compiler": "2.4.4",
"webpack": "3.5.5", "webpack": "3.6.0",
"webpack-dev-middleware": "1.12.0", "webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.18.2", "webpack-hot-middleware": "2.19.1",
"webpack-merge": "4.1.0", "webpack-merge": "4.1.0",
"node-sass": "4.5.3", "node-sass": "4.5.3",
"sass-loader": "6.0.6" "sass-loader": "6.0.6"
Vue_Full_Project/scss/core/_breadcrumb.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.breadcrumb { .breadcrumb {
position: relative; position: relative;
margin-bottom: 1.5 * $spacer; margin: $breadcrumb-margin;
@include borders($breadcrumb-borders); @include borders($breadcrumb-borders);
} }
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
+21 -29
View File
@@ -11,8 +11,8 @@
app-dashboard, app-dashboard,
app-root { app-root {
display: flex; display: flex;
flex-direction: column;
min-height: 100vh; min-height: 100vh;
flex-direction: column;
} }
.app-header { .app-header {
@@ -26,12 +26,12 @@ app-root {
.app-body { .app-body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1;
overflow-x: hidden; overflow-x: hidden;
flex-grow: 1;
.main { .main {
flex: 1;
min-width: 0; min-width: 0;
flex: 1;
} }
.sidebar { .sidebar {
@@ -65,22 +65,22 @@ app-root {
// Sidebar // Sidebar
// //
.sidebar-hidden { .sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-width; margin-left: - $sidebar-width;
} }
} }
.sidebar-fixed { .sidebar-fixed {
.sidebar { .sidebar {
position: fixed; position: fixed;
z-index: $zindex-sticky - 1;
width: $sidebar-width; width: $sidebar-width;
height: 100%;
.sidebar-nav {
height: calc(100vh - #{$navbar-height}); height: calc(100vh - #{$navbar-height});
} // margin-top: - $navbar-height;
// .sidebar-nav {
// height: calc(100vh - #{$navbar-height});
// }
} }
.main, .app-footer { .main, .app-footer {
@@ -88,7 +88,6 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -99,13 +98,8 @@ app-root {
.sidebar { .sidebar {
position: fixed; position: fixed;
z-index: $zindex-sticky - 1; z-index: $zindex-sticky - 1;
height: 100%;
.sidebar-nav {
height: calc(100vh - #{$navbar-height}); height: calc(100vh - #{$navbar-height});
} }
}
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@@ -115,14 +109,12 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-compact-width; margin-left: - $sidebar-compact-width;
} }
} }
&.sidebar-fixed { &.sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-left: $sidebar-compact-width; margin-left: $sidebar-compact-width;
} }
@@ -132,7 +124,6 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -143,17 +134,20 @@ app-root {
.sidebar-minimized { .sidebar-minimized {
.sidebar { .sidebar {
flex: 0 0 $sidebar-minimized-width; flex: 0 0 $sidebar-minimized-width;
.sidebar-header,
.sidebar-form,
.sidebar-footer {
display: none;
}
} }
&.sidebar-hidden { &.sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-minimized-width; margin-left: - $sidebar-minimized-width;
} }
} }
&.sidebar-fixed { &.sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-left: $sidebar-minimized-width; margin-left: $sidebar-minimized-width;
} }
@@ -163,7 +157,6 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -176,14 +169,12 @@ app-root {
// Aside Menu // Aside Menu
// //
.aside-menu-hidden { .aside-menu-hidden {
.aside-menu { .aside-menu {
margin-right: - $aside-menu-width; margin-right: - $aside-menu-width;
} }
} }
.aside-menu-fixed { .aside-menu-fixed {
.aside-menu { .aside-menu {
position: fixed; position: fixed;
right: 0; right: 0;
@@ -199,7 +190,6 @@ app-root {
} }
&.aside-menu-hidden { &.aside-menu-hidden {
.main, .app-footer { .main, .app-footer {
margin-right: 0; margin-right: 0;
} }
@@ -223,7 +213,6 @@ app-root {
// Breadcrumb // Breadcrumb
// //
.breadcrumb-fixed { .breadcrumb-fixed {
.main { .main {
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer; $breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
padding-top: $breadcrumb-height; padding-top: $breadcrumb-height;
@@ -283,7 +272,6 @@ app-root {
// Footer // Footer
// //
.footer-fixed { .footer-fixed {
.app-footer { .app-footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@@ -306,6 +294,9 @@ app-root {
.aside-menu { .aside-menu {
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed; transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
} }
.sidebar-nav {
transition: width $layout-transition-speed;
}
.breadcrumb { .breadcrumb {
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed; transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
} }
@@ -315,12 +306,13 @@ app-root {
// //
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.app-header.navbar {
.app-header {
position: fixed !important; position: fixed !important;
z-index: $zindex-sticky; z-index: $zindex-sticky;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: $navbar-brand-bg;
@include borders($navbar-brand-border);
.navbar-toggler { .navbar-toggler {
@if (lightness( $navbar-brand-bg ) > 40) { @if (lightness( $navbar-brand-bg ) > 40) {
@@ -343,6 +335,7 @@ app-root {
.sidebar { .sidebar {
position: fixed; position: fixed;
z-index: $zindex-sticky - 1;
width: $mobile-sidebar-width; width: $mobile-sidebar-width;
height: 100%; height: 100%;
margin-left: - $mobile-sidebar-width; margin-left: - $mobile-sidebar-width;
@@ -368,7 +361,6 @@ app-root {
} }
.sidebar-mobile-show { .sidebar-mobile-show {
.sidebar { .sidebar {
width: $mobile-sidebar-width; width: $mobile-sidebar-width;
margin-left: 0; margin-left: 0;
Vue_Full_Project/scss/core/_navbar.scss
+1 -1
View File
@@ -1,7 +1,7 @@
.app-header.navbar { .app-header.navbar {
position: relative; position: relative;
flex-direction: row;
height: $navbar-height; height: $navbar-height;
flex-direction: row;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: $navbar-bg; background-color: $navbar-bg;
Vue_Full_Project/scss/core/_rtl.scss
+39 -25
View File
@@ -44,20 +44,17 @@
// Sidebar // Sidebar
// //
.sidebar-hidden { .sidebar-hidden {
.sidebar { .sidebar {
margin-right: - $sidebar-width; margin-right: - $sidebar-width;
} }
} }
.sidebar-fixed { .sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-right: $sidebar-width; margin-right: $sidebar-width;
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-right: 0; margin-right: 0;
} }
@@ -70,20 +67,18 @@
} }
&.sidebar-hidden { &.sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-minimized-width; margin-right: - $sidebar-minimized-width;
margin-left: 0;
} }
} }
&.sidebar-fixed { &.sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-left: $sidebar-minimized-width; margin-right: $sidebar-minimized-width;
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -95,15 +90,13 @@
// Aside Menu // Aside Menu
// //
.aside-menu-hidden { .aside-menu-hidden {
.aside-menu { .aside-menu {
// margin-right: 0; margin-right: 0;
margin-left: - $aside-menu-width; margin-left: - $aside-menu-width;
} }
} }
.aside-menu-fixed { .aside-menu-fixed {
.aside-menu { .aside-menu {
right: auto; right: auto;
left: 0; left: 0;
@@ -115,7 +108,6 @@
} }
&.aside-menu-hidden { &.aside-menu-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -138,15 +130,12 @@
// Sidebar Menu // Sidebar Menu
.sidebar { .sidebar {
.sidebar-nav { .sidebar-nav {
direction: ltr;
* {
direction: rtl;
}
.nav { .nav {
.nav-item { .nav-item {
.nav-link { .nav-link {
[class^="icon-"], [class*=" icon-"] { direction: rtl;
margin-right: -4px; i {
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
} }
.badge { .badge {
float: left; float: left;
@@ -158,13 +147,14 @@
position: absolute; position: absolute;
right: auto !important; right: auto !important;
left: $sidebar-nav-link-padding-x; left: $sidebar-nav-link-padding-x;
transform: rotate(180deg);
} }
} }
} }
&.nav-dropdown { &.nav-dropdown {
&.open { &.open {
> .nav-link.nav-dropdown-toggle::before { > .nav-link.nav-dropdown-toggle::before {
transform: rotate(90deg); transform: rotate(270deg);
} }
} }
} }
@@ -173,6 +163,30 @@
} }
} }
.sidebar-minimized .sidebar {
.nav-link {
padding-right: 0;
i {
float: right;
padding: 0;
margin: 0;
}
.badge {
right: auto;
left: 15px;
}
}
.nav > .nav-dropdown {
&:hover {
> .nav-dropdown-items {
right: $sidebar-minimized-width;
left: 0;
}
}
}
}
// Horizontal bars // Horizontal bars
.horizontal-bars { .horizontal-bars {
@@ -249,6 +263,12 @@
border: 0 solid $border-color; border: 0 solid $border-color;
border-right-width: .25rem; border-right-width: .25rem;
@each $color, $value in $theme-colors {
&.callout-#{$color} {
border-right-color: $value;
}
}
.chart-wrapper { .chart-wrapper {
left: 0; left: 0;
float: left; float: left;
@@ -258,10 +278,4 @@
.callout-default { .callout-default {
border-right-color: $text-muted; border-right-color: $text-muted;
} }
@each $color, $value in $theme-colors {
&.callout-#{$color} {
border-right-color: $value;
}
}
} }
Vue_Full_Project/scss/core/_sidebar.scss
+105 -132
View File
@@ -1,7 +1,8 @@
// scss-lint:disable NestingDepth, SelectorDepth // scss-lint:disable NestingDepth, SelectorDepth
.sidebar { .sidebar {
display: flex;
flex-direction: column;
padding: $sidebar-padding; padding: $sidebar-padding;
overflow: hidden;
color: $sidebar-color; color: $sidebar-color;
background: $sidebar-bg; background: $sidebar-bg;
@include borders($sidebar-borders); @include borders($sidebar-borders);
@@ -24,31 +25,47 @@
} }
} }
// Will be added soon
// .sidebar-brand { }
.sidebar-header {
flex: 0 0 $sidebar-header-height;
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
text-align: center;
background: $sidebar-header-bg;
}
.sidebar-form .form-control {
color: $sidebar-form-color;
background: $sidebar-form-bg;
border: $sidebar-form-border;
&::placeholder {
color: $sidebar-form-placeholder-color;
}
}
.sidebar-nav { .sidebar-nav {
position: relative; position: relative;
flex: 1;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@include sidebar-width($sidebar-borders, $sidebar-width); @include sidebar-width($sidebar-borders, $sidebar-width);
&::-webkit-scrollbar { &::-webkit-scrollbar {
position: absolute; position: absolute;
width: 10px; width: 10px;
margin-left: -10px; margin-left: -10px;
-webkit-appearance: none; -webkit-appearance: none;
} }
// &::-webkit-scrollbar-button { }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: lighten($sidebar-bg, 5%); background-color: lighten($sidebar-bg, 5%);
border-right: 1px solid darken($sidebar-bg, 5%); border-right: 1px solid darken($sidebar-bg, 5%);
border-left: 1px solid darken($sidebar-bg, 5%); border-left: 1px solid darken($sidebar-bg, 5%);
} }
// &::-webkit-scrollbar-track-piece { }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
height: 50px; height: 50px;
background-color: darken($sidebar-bg, 10%); background-color: darken($sidebar-bg, 10%);
@@ -57,15 +74,12 @@
border-style: solid; border-style: solid;
border-width: 1px 2px; border-width: 1px 2px;
} }
// &::-webkit-scrollbar-corner { }
// &::-webkit-resizer { }
} }
.nav { .nav {
@include sidebar-width($sidebar-borders, $sidebar-width); @include sidebar-width($sidebar-borders, $sidebar-width);
flex-direction: column !important; flex-direction: column !important;
}
.nav-title { .nav-title {
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x; padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
@@ -75,7 +89,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.divider { .nav-divider, .divider {
height: 10px; height: 10px;
} }
@@ -83,15 +97,16 @@
position: relative; position: relative;
margin: 0; margin: 0;
transition: background .3s ease-in-out; transition: background .3s ease-in-out;
}
ul { .nav-dropdown-items {
max-height: 0; max-height: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow-y: hidden; overflow-y: hidden;
transition: max-height .3s ease-in-out; transition: max-height .3s ease-in-out;
li { .nav-item {
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
@@ -108,14 +123,18 @@
border-radius: $border-radius; 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 { 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 { &.active {
@@ -128,54 +147,50 @@
} }
} }
[class^="icon-"], [class*=" icon-"] { &:hover {
display: inline-block; color: $sidebar-nav-link-hover-color !important;
margin-top: -4px; background: $sidebar-nav-link-hover-bg !important;
vertical-align: middle; @include borders($sidebar-nav-link-hover-borders);
}
i { i {
width: 20px; color: $sidebar-nav-link-hover-icon-color;
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
font-size: 14px;
color: $sidebar-nav-link-icon-color;
text-align: center;
} }
.badge { &.nav-dropdown-toggle::before {
float: right; background-image: $sidebar-nav-dropdown-indicator-hover;
margin-top: 2px; }
// margin-left: 10px; }
} }
&.nav-dropdown-toggle { // ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
.nav-dropdown-toggle {
position: relative;
&::before { &::before {
position: absolute; position: absolute;
top: ($sidebar-nav-link-padding-y + ($font-size-base / 4)); top: 50%;
right: $sidebar-nav-link-padding-x; right: $sidebar-nav-link-padding-x;
display: block; display: block;
width: ($font-size-base); width: 8px;
height: ($font-size-base); height: 8px;
padding: 0; padding: 0;
font-size: $font-size-base; margin-top: -4px;
line-height: ($font-size-base * 3 / 4); content: "";
text-align: center; background-image: $sidebar-nav-dropdown-indicator;
content: "\2039"; background-repeat: no-repeat;
transition: .3s; background-position: center;
} transition: transform .3s;
} }
} }
&.nav-dropdown { // ex. <li class="nav-item nav-dropdown">
&.open { .nav-dropdown.open {
background: $sidebar-nav-dropdown-bg; background: $sidebar-nav-dropdown-bg;
@include borders($sidebar-nav-dropdown-borders); @include borders($sidebar-nav-dropdown-borders);
@if $enable-sidebar-nav-rounded { @if $enable-sidebar-nav-rounded {
border-radius: $border-radius; border-radius: $border-radius;
} }
> ul, > ol { > .nav-dropdown-items {
// display: inline;
max-height: 1000px; max-height: 1000px;
} }
@@ -192,21 +207,6 @@
border-left: 0; border-left: 0;
} }
} }
&.nt {
transition: 0s !important;
> ul, > ol {
transition: 0s !important;
}
.nav-link {
&.nav-dropdown-toggle {
&::before {
transition: 0s !important;
}
}
}
}
}
.nav-label { .nav-label {
display: block; display: block;
@@ -233,7 +233,11 @@
background-color: lighten($sidebar-bg, 15%) !important; background-color: lighten($sidebar-bg, 15%) !important;
} }
} }
}
.sidebar-footer {
flex: 0 0 $sidebar-footer-height;
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
background: $sidebar-footer-bg;
} }
} }
@@ -283,6 +287,7 @@
} }
} }
// Minimized Sidebar
.sidebar-minimized { .sidebar-minimized {
.hidden-cn { .hidden-cn {
display: none; display: none;
@@ -290,10 +295,6 @@
.sidebar { .sidebar {
z-index: $zindex-sticky - 1; z-index: $zindex-sticky - 1;
&:hover {
overflow: visible;
}
.sidebar-nav { .sidebar-nav {
overflow: visible; overflow: visible;
@include sidebar-width($sidebar-borders, $sidebar-minimized-width); @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
@@ -301,8 +302,13 @@
.nav { .nav {
@include sidebar-width($sidebar-borders, $sidebar-minimized-width); @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
}
.nav-title, .divider { .nav-divider, .divider,
.nav-title,
.sidebar-footer,
.sidebar-form,
.sidebar-header {
display: none; display: none;
} }
@@ -311,8 +317,18 @@
overflow: hidden; overflow: hidden;
border-left: 0 !important; border-left: 0 !important;
ul { &:hover {
background: $sidebar-bg; 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 { .nav-link {
@@ -322,86 +338,37 @@
white-space: nowrap; white-space: nowrap;
border-left: 0 !important; border-left: 0 !important;
&.nav-dropdown-toggle {
&::before {
display: none;
}
}
i { i {
display: block; display: block;
float: left; float: left;
width: $sidebar-minimized-height; width: $sidebar-minimized-height;
padding: 0; // padding: 0;
margin: 0 !important; // margin: 0 !important;
font-size: 18px; font-size: 18px;
} }
.badge { .badge {
position: absolute; position: absolute;
// top: 14px;
right: 15px; right: 15px;
display: none; display: none;
} }
&:hover { &:hover {
width: $sidebar-width; width: $sidebar-width + $sidebar-minimized-width;
background: $sidebar-nav-link-hover-bg;
.badge { .badge {
display: inline; display: inline;
} }
} }
}
ul { &.nav-dropdown-toggle::before {
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; display: none;
} }
} }
}
&:hover { .nav-dropdown-items {
width: $sidebar-width + $sidebar-minimized-width; .nav-item {
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; width: $sidebar-width;
.nav-link { .nav-link {
@@ -410,16 +377,22 @@
} }
} }
&.nav-dropdown { .nav > .nav-dropdown {
&.open { > .nav-dropdown-items {
> ul, > ol { 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; display: inline;
} }
} }
} }
} }
} }
}
}
}
} }
Vue_Full_Project/scss/core/_temp.scss
-13
View File
@@ -16,25 +16,12 @@
// Open state for the dropdown // Open state for the dropdown
.open, .show { .open, .show {
// Show the menu
> .dropdown-menu {
display: block;
}
> .dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
// Remove the outline when :focus is triggered // Remove the outline when :focus is triggered
> a { > a {
outline: 0; outline: 0;
} }
} }
//
.modal-open .modal {
display: block;
}
// navbar dropdown fix // navbar dropdown fix
.navbar .dropdown-toggle { .navbar .dropdown-toggle {
@extend .nav-link; @extend .nav-link;
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-compact-height: $sidebar-compact-width !default;
$sidebar-color: #fff !default; $sidebar-color: #fff !default;
$sidebar-bg: $gray-800 !default; $sidebar-bg: $gray-800 !default;
$sidebar-header-bg: rgba(0,0,0,.2) !default;
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
$sidebar-borders: none !default; $sidebar-borders: none !default;
$mobile-sidebar-width: 220px !default; $mobile-sidebar-width: 220px !default;
// Sidebar Header
$sidebar-header-height: auto !default;
$sidebar-header-bg: rgba(0,0,0,.2) !default;
$sidebar-header-padding-y: .75rem !default;
$sidebar-header-padding-x: 1rem !default;
// Sidebar Form
$sidebar-form-border: 0 !default;
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
$sidebar-form-color: #fff !default;
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
// Sidebar Navigation // Sidebar Navigation
$sidebar-nav-color: #fff !default; $sidebar-nav-color: #fff !default;
@@ -87,7 +99,7 @@ $sidebar-nav-link-padding-y: .75rem !default;
$sidebar-nav-link-padding-x: 1rem !default; $sidebar-nav-link-padding-x: 1rem !default;
$sidebar-nav-link-color: #fff !default; $sidebar-nav-link-color: #fff !default;
$sidebar-nav-link-bg: transparent !default; $sidebar-nav-link-bg: transparent !default;
$sidebar-nav-link-icon-color: $text-muted !default; $sidebar-nav-link-icon-color: $gray-600 !default;
$sidebar-nav-link-borders: 0 !default; $sidebar-nav-link-borders: 0 !default;
$sidebar-nav-link-hover-color: #fff !default; $sidebar-nav-link-hover-color: #fff !default;
@@ -103,6 +115,17 @@ $sidebar-nav-link-active-borders: 0 !default;
$sidebar-nav-dropdown-color: #fff !default; $sidebar-nav-dropdown-color: #fff !default;
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default; $sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
$sidebar-nav-dropdown-borders: 0 !default; $sidebar-nav-dropdown-borders: 0 !default;
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
// Sidebar Footer
$sidebar-footer-height: auto !default;
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
$sidebar-footer-padding-y: .75rem !default;
$sidebar-footer-padding-x: 1rem !default;
// Top Navigation // Top Navigation
@@ -131,6 +154,7 @@ $top-nav-height: $navbar-height - 15px !default;
// Breadcrumb // Breadcrumb
$breadcrumb-margin: 0 0 (1.5 * $spacer) 0 !default;
$breadcrumb-borders: ( $breadcrumb-borders: (
bottom: ( bottom: (
size: 1px, size: 1px,
Vue_Full_Project/scss/style.scss
+4 -4
View File
@@ -1,6 +1,6 @@
/** /**
* CoreUI - Open Source Bootstrap Admin Template * CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.0-alpha.6 * @version v1.0.0
* @link http://coreui.io * @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek * Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT * @license MIT
@@ -20,14 +20,14 @@
// Import Bootstrap source files from bower_components // Import Bootstrap source files from bower_components
// @import "bower_components/bootstrap/scss/bootstrap"; // @import "bower_components/bootstrap/scss/bootstrap";
// Import vendors styles
@import "vendors/vendors";
// Override core variables // Override core variables
@import "core-variables"; @import "core-variables";
// Import core styles // Import core styles
@import "core/core"; @import "core/core";
// Import vendors styles
@import "vendors/vendors";
// Custom styles // Custom styles
@import "custom"; @import "custom";
Vue_Full_Project/src/App.vue
+9 -7
View File
@@ -9,14 +9,16 @@ export default {
</script> </script>
<style> <style>
// Import Font Awesome Icons Set /* Import Font Awesome Icons Set */
$fa-font-path: "~font-awesome/fonts/"; $fa-font-path: '~font-awesome/fonts/';
@import "~font-awesome/css/font-awesome.min.css"; @import '~font-awesome/css/font-awesome.min.css';
// Import Simple Line Icons Set /* Import Simple Line Icons Set */
$simple-line-font-path: "~simple-line-icons/fonts/"; $simple-line-font-path: '~simple-line-icons/fonts/';
@import "~simple-line-icons/css/simple-line-icons.css"; @import '~simple-line-icons/css/simple-line-icons.css';
/* Import Bootstrap Vue Styles */
@import '~bootstrap-vue/dist/bootstrap-vue.css';
</style> </style>
<style lang="scss"> <style lang="scss">
// Import Main styles for this application // Import Main styles for this application
@import "./scss/style"; @import './scss/style';
</style> </style>
Vue_Full_Project/src/components/Sidebar.vue
+22 -10
View File
@@ -1,9 +1,11 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav class="sidebar-nav"> <nav class="sidebar-nav">
<div slot="header"></div> <div slot="header"></div>
<ul class="nav"> <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"> <template v-if="item.title">
<SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/> <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template> </template>
@@ -12,35 +14,42 @@
</template> </template>
<template v-else> <template v-else>
<template v-if="item.children"> <template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon"> <SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(child, index) in item.children"> <template v-for="(childL1, index) in item.children">
<template v-if="child.children"> <template v-if="childL1.children">
<SidebarNavDropdown :name="child.name" :url="child.url" :icon="child.icon"> <!-- Second level dropdown -->
<li class="nav-item" v-for="(child, index) in item.children"> <SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/> <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> </li>
</SidebarNavDropdown> </SidebarNavDropdown>
</template> </template>
<template v-else> <template v-else>
<li class="nav-item"> <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> </li>
</template> </template>
</template> </template>
</SidebarNavDropdown> </SidebarNavDropdown>
</template> </template>
<template v-else> <template v-else>
<li class="nav-item">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/> <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
</template>
</template>
</li> </li>
</template>
</template>
</template>
</ul> </ul>
<slot></slot> <slot></slot>
<div slot="footer"></div>
</nav> </nav>
<SidebarFooter/>
</div> </div>
</template> </template>
<script> <script>
import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarNavDropdown from './SidebarNavDropdown' import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink' import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle' import SidebarNavTitle from './SidebarNavTitle'
@@ -54,6 +63,9 @@ export default {
} }
}, },
components: { components: {
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarNavDropdown, SidebarNavDropdown,
SidebarNavLink, SidebarNavLink,
SidebarNavTitle 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> <template>
<router-link :to="url" class="nav-link"> <router-link :to="url" class="nav-link">
<i :class="icon"></i> {{name}} <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> </router-link>
</template> </template>
Vue_Full_Project/src/views/Dashboard.vue
+4 -4
View File
@@ -2,7 +2,7 @@
<div class="animated fadeIn"> <div class="animated fadeIn">
<div class="row"> <div class="row">
<div class="col-sm-6 col-lg-3"> <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"> <div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right> <b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
@@ -20,7 +20,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-sm-6 col-lg-3"> <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"> <div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right> <b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
@@ -38,7 +38,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-sm-6 col-lg-3"> <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"> <div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right> <b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
@@ -56,7 +56,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-sm-6 col-lg-3"> <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"> <div class="card-body pb-0">
<b-dropdown class="float-right" variant="transparent p-0" right> <b-dropdown class="float-right" variant="transparent p-0" right>
<template slot="button-content"> <template slot="button-content">
Vue_Full_Project/src/views/Widgets.vue
+16 -16
View File
@@ -70,7 +70,7 @@
</div><!--/.row--> </div><!--/.row-->
<div class="row"> <div class="row">
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <div class="card-body p-3 clearfix">
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
@@ -79,7 +79,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <div class="card-body p-3 clearfix">
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
@@ -88,7 +88,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <div class="card-body p-3 clearfix">
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
@@ -97,7 +97,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-3 clearfix"> <div class="card-body p-3 clearfix">
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
@@ -106,7 +106,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <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"> <div class="card-body p-3 clearfix">
<i class="fa fa-cogs bg-primary p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-primary mb-0 mt-2">$1.999,50</div>
@@ -118,7 +118,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <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"> <div class="card-body p-3 clearfix">
<i class="fa fa-laptop bg-info p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-info mb-0 mt-2">$1.999,50</div>
@@ -130,7 +130,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <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"> <div class="card-body p-3 clearfix">
<i class="fa fa-moon-o bg-warning p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-warning mb-0 mt-2">$1.999,50</div>
@@ -142,7 +142,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <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"> <div class="card-body p-3 clearfix">
<i class="fa fa-bell bg-danger p-3 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-danger mb-0 mt-2">$1.999,50</div>
@@ -156,7 +156,7 @@
</div><!--/.row--> </div><!--/.row-->
<div class="row"> <div class="row">
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <div class="card-body p-0 clearfix">
<i class="fa fa-cogs bg-primary p-4 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
@@ -165,7 +165,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <div class="card-body p-0 clearfix">
<i class="fa fa-laptop bg-info p-4 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
@@ -174,7 +174,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <div class="card-body p-0 clearfix">
<i class="fa fa-moon-o bg-warning p-4 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
@@ -183,7 +183,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <div class="card-body p-0 clearfix">
<i class="fa fa-bell bg-danger p-4 font-2xl mr-3 float-left"></i> <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> <div class="h5 text-danger mb-0 pt-3">$1.999,50</div>
@@ -192,7 +192,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <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> <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> <div class="h5 text-primary mb-0 pt-3">$1.999,50</div>
@@ -201,7 +201,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <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> <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> <div class="h5 text-info mb-0 pt-3">$1.999,50</div>
@@ -210,7 +210,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <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> <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> <div class="h5 text-warning mb-0 pt-3">$1.999,50</div>
@@ -219,7 +219,7 @@
</b-card> </b-card>
</div><!--/.col--> </div><!--/.col-->
<div class="col-6 col-lg-3"> <div class="col-6 col-lg-3">
<b-card no-block> <b-card :no-body="true">
<div class="card-body p-0 clearfix"> <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> <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> <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="Static"
:label-cols="3" :label-cols="3"
:horizontal="true"> :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>
<b-form-fieldset <b-form-fieldset
description="This is a help text" 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", "name": "coreui-vue",
"version": "1.0.0-alpha.6", "version": "1.0.0",
"description": "Open Source Admin Template", "description": "Open Source Admin Template",
"author": "Łukasz Holeczek <lukasz@holeczek.pl>", "author": "Łukasz Holeczek <lukasz@holeczek.pl>",
"private": true, "private": true,
@@ -14,18 +14,18 @@
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs"
}, },
"dependencies": { "dependencies": {
"bootstrap-vue": "^0.23.0", "bootstrap-vue": "1.0.0-beta.7",
"chart.js": "2.6.0", "chart.js": "2.7.0",
"vue": "2.4.2",
"vue-chartjs": "2.8.2",
"vue-router": "2.7.0",
"font-awesome": "^4.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": { "devDependencies": {
"autoprefixer": "7.1.3", "autoprefixer": "7.1.4",
"babel-core": "6.26.0", "babel-core": "6.26.0",
"babel-eslint": "7.2.3", "babel-eslint": "8.0.0",
"babel-loader": "7.1.2", "babel-loader": "7.1.2",
"babel-plugin-transform-runtime": "^6.22.0", "babel-plugin-transform-runtime": "^6.22.0",
"babel-preset-env": "1.6.0", "babel-preset-env": "1.6.0",
@@ -35,10 +35,10 @@
"connect-history-api-fallback": "^1.3.0", "connect-history-api-fallback": "^1.3.0",
"copy-webpack-plugin": "^4.0.1", "copy-webpack-plugin": "^4.0.1",
"css-loader": "0.28.7", "css-loader": "0.28.7",
"eslint": "4.5.0", "eslint": "4.7.1",
"eslint-friendly-formatter": "3.0.0", "eslint-friendly-formatter": "3.0.0",
"eslint-loader": "1.9.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-import": "2.7.0",
"eslint-plugin-node": "5.1.1", "eslint-plugin-node": "5.1.1",
"eslint-config-standard": "10.2.1", "eslint-config-standard": "10.2.1",
@@ -63,30 +63,30 @@
"karma-spec-reporter": "0.0.31", "karma-spec-reporter": "0.0.31",
"karma-webpack": "2.0.4", "karma-webpack": "2.0.4",
"lolex": "2.1.2", "lolex": "2.1.2",
"mocha": "3.5.0", "mocha": "3.5.3",
"chai": "4.1.2", "chai": "4.1.2",
"sinon": "3.2.1", "sinon": "3.3.0",
"sinon-chai": "2.13.0", "sinon-chai": "2.13.0",
"inject-loader": "3.0.1", "inject-loader": "3.0.1",
"babel-plugin-istanbul": "4.1.4", "babel-plugin-istanbul": "4.1.5",
"phantomjs-prebuilt": "^2.1.15", "phantomjs-prebuilt": "^2.1.15",
"chromedriver": "2.32.0", "chromedriver": "2.32.3",
"cross-spawn": "^5.0.1", "cross-spawn": "^5.0.1",
"nightwatch": "0.9.16", "nightwatch": "0.9.16",
"selenium-server": "3.5.2", "selenium-server": "3.5.3",
"semver": "5.4.1", "semver": "5.4.1",
"shelljs": "0.7.8", "shelljs": "0.7.8",
"opn": "5.1.0", "opn": "5.1.0",
"optimize-css-assets-webpack-plugin": "3.1.1", "optimize-css-assets-webpack-plugin": "3.2.0",
"ora": "1.3.0", "ora": "1.3.0",
"rimraf": "^2.6.0", "rimraf": "2.6.2",
"url-loader": "0.5.9", "url-loader": "0.5.9",
"vue-loader": "13.0.4", "vue-loader": "13.0.5",
"vue-style-loader": "3.0.1", "vue-style-loader": "3.0.3",
"vue-template-compiler": "2.4.2", "vue-template-compiler": "2.4.4",
"webpack": "3.5.5", "webpack": "3.6.0",
"webpack-dev-middleware": "1.12.0", "webpack-dev-middleware": "1.12.0",
"webpack-hot-middleware": "2.18.2", "webpack-hot-middleware": "2.19.1",
"webpack-merge": "4.1.0", "webpack-merge": "4.1.0",
"node-sass": "4.5.3", "node-sass": "4.5.3",
"sass-loader": "6.0.6" "sass-loader": "6.0.6"
Vue_Starter/scss/core/_breadcrumb.scss
+1 -1
View File
@@ -1,6 +1,6 @@
.breadcrumb { .breadcrumb {
position: relative; position: relative;
margin-bottom: 1.5 * $spacer; margin: $breadcrumb-margin;
@include borders($breadcrumb-borders); @include borders($breadcrumb-borders);
} }
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
+21 -29
View File
@@ -11,8 +11,8 @@
app-dashboard, app-dashboard,
app-root { app-root {
display: flex; display: flex;
flex-direction: column;
min-height: 100vh; min-height: 100vh;
flex-direction: column;
} }
.app-header { .app-header {
@@ -26,12 +26,12 @@ app-root {
.app-body { .app-body {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-grow: 1;
overflow-x: hidden; overflow-x: hidden;
flex-grow: 1;
.main { .main {
flex: 1;
min-width: 0; min-width: 0;
flex: 1;
} }
.sidebar { .sidebar {
@@ -65,22 +65,22 @@ app-root {
// Sidebar // Sidebar
// //
.sidebar-hidden { .sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-width; margin-left: - $sidebar-width;
} }
} }
.sidebar-fixed { .sidebar-fixed {
.sidebar { .sidebar {
position: fixed; position: fixed;
z-index: $zindex-sticky - 1;
width: $sidebar-width; width: $sidebar-width;
height: 100%;
.sidebar-nav {
height: calc(100vh - #{$navbar-height}); height: calc(100vh - #{$navbar-height});
} // margin-top: - $navbar-height;
// .sidebar-nav {
// height: calc(100vh - #{$navbar-height});
// }
} }
.main, .app-footer { .main, .app-footer {
@@ -88,7 +88,6 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -99,13 +98,8 @@ app-root {
.sidebar { .sidebar {
position: fixed; position: fixed;
z-index: $zindex-sticky - 1; z-index: $zindex-sticky - 1;
height: 100%;
.sidebar-nav {
height: calc(100vh - #{$navbar-height}); height: calc(100vh - #{$navbar-height});
} }
}
} }
@include media-breakpoint-up(lg) { @include media-breakpoint-up(lg) {
@@ -115,14 +109,12 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-compact-width; margin-left: - $sidebar-compact-width;
} }
} }
&.sidebar-fixed { &.sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-left: $sidebar-compact-width; margin-left: $sidebar-compact-width;
} }
@@ -132,7 +124,6 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -143,17 +134,20 @@ app-root {
.sidebar-minimized { .sidebar-minimized {
.sidebar { .sidebar {
flex: 0 0 $sidebar-minimized-width; flex: 0 0 $sidebar-minimized-width;
.sidebar-header,
.sidebar-form,
.sidebar-footer {
display: none;
}
} }
&.sidebar-hidden { &.sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-minimized-width; margin-left: - $sidebar-minimized-width;
} }
} }
&.sidebar-fixed { &.sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-left: $sidebar-minimized-width; margin-left: $sidebar-minimized-width;
} }
@@ -163,7 +157,6 @@ app-root {
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -176,14 +169,12 @@ app-root {
// Aside Menu // Aside Menu
// //
.aside-menu-hidden { .aside-menu-hidden {
.aside-menu { .aside-menu {
margin-right: - $aside-menu-width; margin-right: - $aside-menu-width;
} }
} }
.aside-menu-fixed { .aside-menu-fixed {
.aside-menu { .aside-menu {
position: fixed; position: fixed;
right: 0; right: 0;
@@ -199,7 +190,6 @@ app-root {
} }
&.aside-menu-hidden { &.aside-menu-hidden {
.main, .app-footer { .main, .app-footer {
margin-right: 0; margin-right: 0;
} }
@@ -223,7 +213,6 @@ app-root {
// Breadcrumb // Breadcrumb
// //
.breadcrumb-fixed { .breadcrumb-fixed {
.main { .main {
$breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer; $breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer;
padding-top: $breadcrumb-height; padding-top: $breadcrumb-height;
@@ -283,7 +272,6 @@ app-root {
// Footer // Footer
// //
.footer-fixed { .footer-fixed {
.app-footer { .app-footer {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
@@ -306,6 +294,9 @@ app-root {
.aside-menu { .aside-menu {
transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed; transition: margin-left $layout-transition-speed, margin-right $layout-transition-speed, width $layout-transition-speed, flex $layout-transition-speed;
} }
.sidebar-nav {
transition: width $layout-transition-speed;
}
.breadcrumb { .breadcrumb {
transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed; transition: left $layout-transition-speed, right $layout-transition-speed, width $layout-transition-speed;
} }
@@ -315,12 +306,13 @@ app-root {
// //
@include media-breakpoint-down(md) { @include media-breakpoint-down(md) {
.app-header.navbar {
.app-header {
position: fixed !important; position: fixed !important;
z-index: $zindex-sticky; z-index: $zindex-sticky;
width: 100%; width: 100%;
text-align: center; text-align: center;
background-color: $navbar-brand-bg;
@include borders($navbar-brand-border);
.navbar-toggler { .navbar-toggler {
@if (lightness( $navbar-brand-bg ) > 40) { @if (lightness( $navbar-brand-bg ) > 40) {
@@ -343,6 +335,7 @@ app-root {
.sidebar { .sidebar {
position: fixed; position: fixed;
z-index: $zindex-sticky - 1;
width: $mobile-sidebar-width; width: $mobile-sidebar-width;
height: 100%; height: 100%;
margin-left: - $mobile-sidebar-width; margin-left: - $mobile-sidebar-width;
@@ -368,7 +361,6 @@ app-root {
} }
.sidebar-mobile-show { .sidebar-mobile-show {
.sidebar { .sidebar {
width: $mobile-sidebar-width; width: $mobile-sidebar-width;
margin-left: 0; margin-left: 0;
Vue_Starter/scss/core/_navbar.scss
+1 -1
View File
@@ -1,7 +1,7 @@
.app-header.navbar { .app-header.navbar {
position: relative; position: relative;
flex-direction: row;
height: $navbar-height; height: $navbar-height;
flex-direction: row;
padding: 0; padding: 0;
margin: 0; margin: 0;
background-color: $navbar-bg; background-color: $navbar-bg;
Vue_Starter/scss/core/_rtl.scss
+39 -25
View File
@@ -44,20 +44,17 @@
// Sidebar // Sidebar
// //
.sidebar-hidden { .sidebar-hidden {
.sidebar { .sidebar {
margin-right: - $sidebar-width; margin-right: - $sidebar-width;
} }
} }
.sidebar-fixed { .sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-right: $sidebar-width; margin-right: $sidebar-width;
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-right: 0; margin-right: 0;
} }
@@ -70,20 +67,18 @@
} }
&.sidebar-hidden { &.sidebar-hidden {
.sidebar { .sidebar {
margin-left: - $sidebar-minimized-width; margin-right: - $sidebar-minimized-width;
margin-left: 0;
} }
} }
&.sidebar-fixed { &.sidebar-fixed {
.main, .app-footer { .main, .app-footer {
margin-left: $sidebar-minimized-width; margin-right: $sidebar-minimized-width;
} }
&.sidebar-hidden { &.sidebar-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -95,15 +90,13 @@
// Aside Menu // Aside Menu
// //
.aside-menu-hidden { .aside-menu-hidden {
.aside-menu { .aside-menu {
// margin-right: 0; margin-right: 0;
margin-left: - $aside-menu-width; margin-left: - $aside-menu-width;
} }
} }
.aside-menu-fixed { .aside-menu-fixed {
.aside-menu { .aside-menu {
right: auto; right: auto;
left: 0; left: 0;
@@ -115,7 +108,6 @@
} }
&.aside-menu-hidden { &.aside-menu-hidden {
.main, .app-footer { .main, .app-footer {
margin-left: 0; margin-left: 0;
} }
@@ -138,15 +130,12 @@
// Sidebar Menu // Sidebar Menu
.sidebar { .sidebar {
.sidebar-nav { .sidebar-nav {
direction: ltr;
* {
direction: rtl;
}
.nav { .nav {
.nav-item { .nav-item {
.nav-link { .nav-link {
[class^="icon-"], [class*=" icon-"] { direction: rtl;
margin-right: -4px; i {
margin: 0 0 0 ($sidebar-nav-link-padding-x / 2);
} }
.badge { .badge {
float: left; float: left;
@@ -158,13 +147,14 @@
position: absolute; position: absolute;
right: auto !important; right: auto !important;
left: $sidebar-nav-link-padding-x; left: $sidebar-nav-link-padding-x;
transform: rotate(180deg);
} }
} }
} }
&.nav-dropdown { &.nav-dropdown {
&.open { &.open {
> .nav-link.nav-dropdown-toggle::before { > .nav-link.nav-dropdown-toggle::before {
transform: rotate(90deg); transform: rotate(270deg);
} }
} }
} }
@@ -173,6 +163,30 @@
} }
} }
.sidebar-minimized .sidebar {
.nav-link {
padding-right: 0;
i {
float: right;
padding: 0;
margin: 0;
}
.badge {
right: auto;
left: 15px;
}
}
.nav > .nav-dropdown {
&:hover {
> .nav-dropdown-items {
right: $sidebar-minimized-width;
left: 0;
}
}
}
}
// Horizontal bars // Horizontal bars
.horizontal-bars { .horizontal-bars {
@@ -249,6 +263,12 @@
border: 0 solid $border-color; border: 0 solid $border-color;
border-right-width: .25rem; border-right-width: .25rem;
@each $color, $value in $theme-colors {
&.callout-#{$color} {
border-right-color: $value;
}
}
.chart-wrapper { .chart-wrapper {
left: 0; left: 0;
float: left; float: left;
@@ -258,10 +278,4 @@
.callout-default { .callout-default {
border-right-color: $text-muted; border-right-color: $text-muted;
} }
@each $color, $value in $theme-colors {
&.callout-#{$color} {
border-right-color: $value;
}
}
} }
Vue_Starter/scss/core/_sidebar.scss
+105 -132
View File
@@ -1,7 +1,8 @@
// scss-lint:disable NestingDepth, SelectorDepth // scss-lint:disable NestingDepth, SelectorDepth
.sidebar { .sidebar {
display: flex;
flex-direction: column;
padding: $sidebar-padding; padding: $sidebar-padding;
overflow: hidden;
color: $sidebar-color; color: $sidebar-color;
background: $sidebar-bg; background: $sidebar-bg;
@include borders($sidebar-borders); @include borders($sidebar-borders);
@@ -24,31 +25,47 @@
} }
} }
// Will be added soon
// .sidebar-brand { }
.sidebar-header {
flex: 0 0 $sidebar-header-height;
padding: $sidebar-header-padding-y $sidebar-header-padding-x;
text-align: center;
background: $sidebar-header-bg;
}
.sidebar-form .form-control {
color: $sidebar-form-color;
background: $sidebar-form-bg;
border: $sidebar-form-border;
&::placeholder {
color: $sidebar-form-placeholder-color;
}
}
.sidebar-nav { .sidebar-nav {
position: relative; position: relative;
flex: 1;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
-ms-overflow-style: -ms-autohiding-scrollbar; -ms-overflow-style: -ms-autohiding-scrollbar;
@include sidebar-width($sidebar-borders, $sidebar-width); @include sidebar-width($sidebar-borders, $sidebar-width);
&::-webkit-scrollbar { &::-webkit-scrollbar {
position: absolute; position: absolute;
width: 10px; width: 10px;
margin-left: -10px; margin-left: -10px;
-webkit-appearance: none; -webkit-appearance: none;
} }
// &::-webkit-scrollbar-button { }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background-color: lighten($sidebar-bg, 5%); background-color: lighten($sidebar-bg, 5%);
border-right: 1px solid darken($sidebar-bg, 5%); border-right: 1px solid darken($sidebar-bg, 5%);
border-left: 1px solid darken($sidebar-bg, 5%); border-left: 1px solid darken($sidebar-bg, 5%);
} }
// &::-webkit-scrollbar-track-piece { }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
height: 50px; height: 50px;
background-color: darken($sidebar-bg, 10%); background-color: darken($sidebar-bg, 10%);
@@ -57,15 +74,12 @@
border-style: solid; border-style: solid;
border-width: 1px 2px; border-width: 1px 2px;
} }
// &::-webkit-scrollbar-corner { }
// &::-webkit-resizer { }
} }
.nav { .nav {
@include sidebar-width($sidebar-borders, $sidebar-width); @include sidebar-width($sidebar-borders, $sidebar-width);
flex-direction: column !important; flex-direction: column !important;
}
.nav-title { .nav-title {
padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x; padding: $sidebar-nav-title-padding-y $sidebar-nav-title-padding-x;
@@ -75,7 +89,7 @@
text-transform: uppercase; text-transform: uppercase;
} }
.divider { .nav-divider, .divider {
height: 10px; height: 10px;
} }
@@ -83,15 +97,16 @@
position: relative; position: relative;
margin: 0; margin: 0;
transition: background .3s ease-in-out; transition: background .3s ease-in-out;
}
ul { .nav-dropdown-items {
max-height: 0; max-height: 0;
padding: 0; padding: 0;
margin: 0; margin: 0;
overflow-y: hidden; overflow-y: hidden;
transition: max-height .3s ease-in-out; transition: max-height .3s ease-in-out;
li { .nav-item {
padding: 0; padding: 0;
list-style: none; list-style: none;
} }
@@ -108,14 +123,18 @@
border-radius: $border-radius; 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 { 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 { &.active {
@@ -128,54 +147,50 @@
} }
} }
[class^="icon-"], [class*=" icon-"] { &:hover {
display: inline-block; color: $sidebar-nav-link-hover-color !important;
margin-top: -4px; background: $sidebar-nav-link-hover-bg !important;
vertical-align: middle; @include borders($sidebar-nav-link-hover-borders);
}
i { i {
width: 20px; color: $sidebar-nav-link-hover-icon-color;
margin: 0 ($sidebar-nav-link-padding-x / 2) 0 0;
font-size: 14px;
color: $sidebar-nav-link-icon-color;
text-align: center;
} }
.badge { &.nav-dropdown-toggle::before {
float: right; background-image: $sidebar-nav-dropdown-indicator-hover;
margin-top: 2px; }
// margin-left: 10px; }
} }
&.nav-dropdown-toggle { // ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
.nav-dropdown-toggle {
position: relative;
&::before { &::before {
position: absolute; position: absolute;
top: ($sidebar-nav-link-padding-y + ($font-size-base / 4)); top: 50%;
right: $sidebar-nav-link-padding-x; right: $sidebar-nav-link-padding-x;
display: block; display: block;
width: ($font-size-base); width: 8px;
height: ($font-size-base); height: 8px;
padding: 0; padding: 0;
font-size: $font-size-base; margin-top: -4px;
line-height: ($font-size-base * 3 / 4); content: "";
text-align: center; background-image: $sidebar-nav-dropdown-indicator;
content: "\2039"; background-repeat: no-repeat;
transition: .3s; background-position: center;
} transition: transform .3s;
} }
} }
&.nav-dropdown { // ex. <li class="nav-item nav-dropdown">
&.open { .nav-dropdown.open {
background: $sidebar-nav-dropdown-bg; background: $sidebar-nav-dropdown-bg;
@include borders($sidebar-nav-dropdown-borders); @include borders($sidebar-nav-dropdown-borders);
@if $enable-sidebar-nav-rounded { @if $enable-sidebar-nav-rounded {
border-radius: $border-radius; border-radius: $border-radius;
} }
> ul, > ol { > .nav-dropdown-items {
// display: inline;
max-height: 1000px; max-height: 1000px;
} }
@@ -192,21 +207,6 @@
border-left: 0; border-left: 0;
} }
} }
&.nt {
transition: 0s !important;
> ul, > ol {
transition: 0s !important;
}
.nav-link {
&.nav-dropdown-toggle {
&::before {
transition: 0s !important;
}
}
}
}
}
.nav-label { .nav-label {
display: block; display: block;
@@ -233,7 +233,11 @@
background-color: lighten($sidebar-bg, 15%) !important; background-color: lighten($sidebar-bg, 15%) !important;
} }
} }
}
.sidebar-footer {
flex: 0 0 $sidebar-footer-height;
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
background: $sidebar-footer-bg;
} }
} }
@@ -283,6 +287,7 @@
} }
} }
// Minimized Sidebar
.sidebar-minimized { .sidebar-minimized {
.hidden-cn { .hidden-cn {
display: none; display: none;
@@ -290,10 +295,6 @@
.sidebar { .sidebar {
z-index: $zindex-sticky - 1; z-index: $zindex-sticky - 1;
&:hover {
overflow: visible;
}
.sidebar-nav { .sidebar-nav {
overflow: visible; overflow: visible;
@include sidebar-width($sidebar-borders, $sidebar-minimized-width); @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
@@ -301,8 +302,13 @@
.nav { .nav {
@include sidebar-width($sidebar-borders, $sidebar-minimized-width); @include sidebar-width($sidebar-borders, $sidebar-minimized-width);
}
.nav-title, .divider { .nav-divider, .divider,
.nav-title,
.sidebar-footer,
.sidebar-form,
.sidebar-header {
display: none; display: none;
} }
@@ -311,8 +317,18 @@
overflow: hidden; overflow: hidden;
border-left: 0 !important; border-left: 0 !important;
ul { &:hover {
background: $sidebar-bg; 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 { .nav-link {
@@ -322,86 +338,37 @@
white-space: nowrap; white-space: nowrap;
border-left: 0 !important; border-left: 0 !important;
&.nav-dropdown-toggle {
&::before {
display: none;
}
}
i { i {
display: block; display: block;
float: left; float: left;
width: $sidebar-minimized-height; width: $sidebar-minimized-height;
padding: 0; // padding: 0;
margin: 0 !important; // margin: 0 !important;
font-size: 18px; font-size: 18px;
} }
.badge { .badge {
position: absolute; position: absolute;
// top: 14px;
right: 15px; right: 15px;
display: none; display: none;
} }
&:hover { &:hover {
width: $sidebar-width; width: $sidebar-width + $sidebar-minimized-width;
background: $sidebar-nav-link-hover-bg;
.badge { .badge {
display: inline; display: inline;
} }
} }
}
ul { &.nav-dropdown-toggle::before {
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; display: none;
} }
} }
}
&:hover { .nav-dropdown-items {
width: $sidebar-width + $sidebar-minimized-width; .nav-item {
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; width: $sidebar-width;
.nav-link { .nav-link {
@@ -410,16 +377,22 @@
} }
} }
&.nav-dropdown { .nav > .nav-dropdown {
&.open { > .nav-dropdown-items {
> ul, > ol { 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; display: inline;
} }
} }
} }
} }
} }
}
}
}
} }
Vue_Starter/scss/core/_temp.scss
-13
View File
@@ -16,25 +16,12 @@
// Open state for the dropdown // Open state for the dropdown
.open, .show { .open, .show {
// Show the menu
> .dropdown-menu {
display: block;
}
> .dropdown-menu-right {
right: 0;
left: auto; // Reset the default from `.dropdown-menu`
}
// Remove the outline when :focus is triggered // Remove the outline when :focus is triggered
> a { > a {
outline: 0; outline: 0;
} }
} }
//
.modal-open .modal {
display: block;
}
// navbar dropdown fix // navbar dropdown fix
.navbar .dropdown-toggle { .navbar .dropdown-toggle {
@extend .nav-link; @extend .nav-link;
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-compact-height: $sidebar-compact-width !default;
$sidebar-color: #fff !default; $sidebar-color: #fff !default;
$sidebar-bg: $gray-800 !default; $sidebar-bg: $gray-800 !default;
$sidebar-header-bg: rgba(0,0,0,.2) !default;
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
$sidebar-borders: none !default; $sidebar-borders: none !default;
$mobile-sidebar-width: 220px !default; $mobile-sidebar-width: 220px !default;
// Sidebar Header
$sidebar-header-height: auto !default;
$sidebar-header-bg: rgba(0,0,0,.2) !default;
$sidebar-header-padding-y: .75rem !default;
$sidebar-header-padding-x: 1rem !default;
// Sidebar Form
$sidebar-form-border: 0 !default;
$sidebar-form-bg: darken($sidebar-bg,10%) !default;
$sidebar-form-color: #fff !default;
$sidebar-form-placeholder-color: rgba(255,255,255,.7) !default;
// Sidebar Navigation // Sidebar Navigation
$sidebar-nav-color: #fff !default; $sidebar-nav-color: #fff !default;
@@ -87,7 +99,7 @@ $sidebar-nav-link-padding-y: .75rem !default;
$sidebar-nav-link-padding-x: 1rem !default; $sidebar-nav-link-padding-x: 1rem !default;
$sidebar-nav-link-color: #fff !default; $sidebar-nav-link-color: #fff !default;
$sidebar-nav-link-bg: transparent !default; $sidebar-nav-link-bg: transparent !default;
$sidebar-nav-link-icon-color: $text-muted !default; $sidebar-nav-link-icon-color: $gray-600 !default;
$sidebar-nav-link-borders: 0 !default; $sidebar-nav-link-borders: 0 !default;
$sidebar-nav-link-hover-color: #fff !default; $sidebar-nav-link-hover-color: #fff !default;
@@ -103,6 +115,17 @@ $sidebar-nav-link-active-borders: 0 !default;
$sidebar-nav-dropdown-color: #fff !default; $sidebar-nav-dropdown-color: #fff !default;
$sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default; $sidebar-nav-dropdown-bg: rgba(0,0,0,.2) !default;
$sidebar-nav-dropdown-borders: 0 !default; $sidebar-nav-dropdown-borders: 0 !default;
$sidebar-nav-dropdown-indicator-color:$gray-600 !default;
$sidebar-nav-dropdown-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
$sidebar-nav-dropdown-indicator-hover-color:$sidebar-nav-link-hover-color;
$sidebar-nav-dropdown-indicator-hover:str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-nav-dropdown-indicator-hover-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
// Sidebar Footer
$sidebar-footer-height: auto !default;
$sidebar-footer-bg: rgba(0,0,0,.2) !default;
$sidebar-footer-padding-y: .75rem !default;
$sidebar-footer-padding-x: 1rem !default;
// Top Navigation // Top Navigation
@@ -131,6 +154,7 @@ $top-nav-height: $navbar-height - 15px !default;
// Breadcrumb // Breadcrumb
$breadcrumb-margin: 0 0 (1.5 * $spacer) 0 !default;
$breadcrumb-borders: ( $breadcrumb-borders: (
bottom: ( bottom: (
size: 1px, size: 1px,
Vue_Starter/scss/style.scss
+4 -4
View File
@@ -1,6 +1,6 @@
/** /**
* CoreUI - Open Source Bootstrap Admin Template * CoreUI - Open Source Bootstrap Admin Template
* @version v1.0.0-alpha.6 * @version v1.0.0
* @link http://coreui.io * @link http://coreui.io
* Copyright (c) 2017 creativeLabs Łukasz Holeczek * Copyright (c) 2017 creativeLabs Łukasz Holeczek
* @license MIT * @license MIT
@@ -20,14 +20,14 @@
// Import Bootstrap source files from bower_components // Import Bootstrap source files from bower_components
// @import "bower_components/bootstrap/scss/bootstrap"; // @import "bower_components/bootstrap/scss/bootstrap";
// Import vendors styles
@import "vendors/vendors";
// Override core variables // Override core variables
@import "core-variables"; @import "core-variables";
// Import core styles // Import core styles
@import "core/core"; @import "core/core";
// Import vendors styles
@import "vendors/vendors";
// Custom styles // Custom styles
@import "custom"; @import "custom";
Vue_Starter/src/App.vue
+9 -8
View File
@@ -9,15 +9,16 @@ export default {
</script> </script>
<style> <style>
// Import Font Awesome Icons Set /* Import Font Awesome Icons Set */
$fa-font-path: "~font-awesome/fonts/"; $fa-font-path: '~font-awesome/fonts/';
@import "~font-awesome/css/font-awesome.min.css"; @import '~font-awesome/css/font-awesome.min.css';
// Import Simple Line Icons Set /* Import Simple Line Icons Set */
$simple-line-font-path: "~simple-line-icons/fonts/"; $simple-line-font-path: '~simple-line-icons/fonts/';
@import "~simple-line-icons/css/simple-line-icons.css"; @import '~simple-line-icons/css/simple-line-icons.css';
/* Import Bootstrap Vue Styles */
@import '~bootstrap-vue/dist/bootstrap-vue.css';
</style> </style>
<style lang="scss"> <style lang="scss">
// Import Main styles for this application // Import Main styles for this application
@import "./scss/style"; @import './scss/style';
</style> </style>
Vue_Starter/src/components/Sidebar.vue
+23 -11
View File
@@ -1,46 +1,55 @@
<template> <template>
<div class="sidebar"> <div class="sidebar">
<SidebarHeader/>
<SidebarForm/>
<nav class="sidebar-nav"> <nav class="sidebar-nav">
<div slot="header"></div> <div slot="header"></div>
<ul class="nav"> <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"> <template v-if="item.title">
<SidebarNavTitle :name="item.name"/> <SidebarNavTitle :name="item.name" :classes="item.class" :wrapper="item.wrapper"/>
</template> </template>
<template v-else-if="item.divider"> <template v-else-if="item.divider">
<li class="divider"></li> <li class="divider"></li>
</template> </template>
<template v-else> <template v-else>
<template v-if="item.children"> <template v-if="item.children">
<!-- First level dropdown -->
<SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon"> <SidebarNavDropdown :name="item.name" :url="item.url" :icon="item.icon">
<template v-for="(child, index) in item.children"> <template v-for="(childL1, index) in item.children">
<template v-if="child.children"> <template v-if="childL1.children">
<SidebarNavDropdown :name="child.name" :url="child.url" :icon="child.icon"> <!-- Second level dropdown -->
<li class="nav-item" v-for="(child, index) in item.children"> <SidebarNavDropdown :name="childL1.name" :url="childL1.url" :icon="childL1.icon">
<SidebarNavLink :name="child.name" :url="child.url" :icon="child.icon" :badge="child.badge"/> <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> </li>
</SidebarNavDropdown> </SidebarNavDropdown>
</template> </template>
<template v-else> <template v-else>
<li class="nav-item"> <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> </li>
</template> </template>
</template> </template>
</SidebarNavDropdown> </SidebarNavDropdown>
</template> </template>
<template v-else> <template v-else>
<li class="nav-item">
<SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/> <SidebarNavLink :name="item.name" :url="item.url" :icon="item.icon" :badge="item.badge"/>
</template>
</template>
</li> </li>
</template>
</template>
</template>
</ul> </ul>
<slot></slot> <slot></slot>
<div slot="footer"></div>
</nav> </nav>
<SidebarFooter/>
</div> </div>
</template> </template>
<script> <script>
import SidebarFooter from './SidebarFooter'
import SidebarForm from './SidebarForm'
import SidebarHeader from './SidebarHeader'
import SidebarNavDropdown from './SidebarNavDropdown' import SidebarNavDropdown from './SidebarNavDropdown'
import SidebarNavLink from './SidebarNavLink' import SidebarNavLink from './SidebarNavLink'
import SidebarNavTitle from './SidebarNavTitle' import SidebarNavTitle from './SidebarNavTitle'
@@ -54,6 +63,9 @@ export default {
} }
}, },
components: { components: {
SidebarFooter,
SidebarForm,
SidebarHeader,
SidebarNavDropdown, SidebarNavDropdown,
SidebarNavLink, SidebarNavLink,
SidebarNavTitle 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
+16 -1
View File
@@ -1,6 +1,13 @@
<template> <template>
<li class="nav-title"> <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}} {{name}}
</component>
</template>
<template v-else>
{{name}}
</template>
</li> </li>
</template> </template>
@@ -10,6 +17,14 @@ export default {
name: { name: {
type: String, type: String,
default: '' 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", "name": "coreui.io-vue",
"version": "1.0.0-alpha.6", "version": "1.0.0",
"description": "Open Source Vue Admin Template", "description": "Open Source Vue Admin Template",
"main": "", "main": "",
"homepage": "http://coreui.io", "homepage": "http://coreui.io/vue/",
"github": "https://github.com/mrholek/CoreUI-Vue#readme", "github": "https://github.com/mrholek/CoreUI-Vue#readme",
"scripts": { "scripts": {
"test": "echo \"Error: no test specified\" && exit 1" "test": "echo \"Error: no test specified\" && exit 1"