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
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