diff --git a/Vue_Full_Project/index.html b/Vue_Full_Project/index.html index 424343db..7246f005 100644 --- a/Vue_Full_Project/index.html +++ b/Vue_Full_Project/index.html @@ -12,6 +12,9 @@ // Header options 1. '.header-fixed' - Fixed Header + // Brand options + 1. '.brand-minimized' - Minimized brand (Only symbol) + // Sidebar options 1. '.sidebar-fixed' - Fixed Sidebar 2. '.sidebar-hidden' - Hidden Sidebar diff --git a/Vue_Full_Project/package.json b/Vue_Full_Project/package.json index c89d3428..ea9ad742 100644 --- a/Vue_Full_Project/package.json +++ b/Vue_Full_Project/package.json @@ -1,7 +1,7 @@ { - "name": "coreui-vue", + "name": "@coreui/vue", "version": "1.0.0", - "description": "Open Source Admin Template", + "description": "", "author": "Łukasz Holeczek ", "private": true, "scripts": { @@ -14,9 +14,10 @@ "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs" }, "dependencies": { - "bootstrap-vue": "1.0.0-beta.7", + "bootstrap-vue": "1.0.0-beta.9", "chart.js": "2.7.0", "font-awesome": "^4.7.0", + "is-url-external": "^1.0.3", "simple-line-icons": "^2.4.1", "vue": "2.4.4", "vue-chartjs": "2.8.7", @@ -35,7 +36,7 @@ "connect-history-api-fallback": "^1.3.0", "copy-webpack-plugin": "^4.0.1", "css-loader": "0.28.7", - "eslint": "4.7.1", + "eslint": "4.7.2", "eslint-friendly-formatter": "3.0.0", "eslint-loader": "1.9.0", "eslint-plugin-html": "3.2.2", @@ -45,7 +46,7 @@ "eslint-plugin-promise": "3.5.0", "eslint-plugin-standard": "3.0.1", "eventsource-polyfill": "^0.9.6", - "express": "4.15.4", + "express": "4.15.5", "extract-text-webpack-plugin": "3.0.0", "file-loader": "0.11.2", "friendly-errors-webpack-plugin": "1.6.1", @@ -57,7 +58,7 @@ "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", "karma-phantomjs-launcher": "1.0.4", - "karma-phantomjs-shim": "^1.4.0", + "karma-phantomjs-shim": "^1.5.0", "karma-sinon-chai": "1.3.2", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", diff --git a/Vue_Full_Project/scss/core/_animate.scss b/Vue_Full_Project/scss/core/_animate.scss index e23d91e9..c0a244ba 100644 --- a/Vue_Full_Project/scss/core/_animate.scss +++ b/Vue_Full_Project/scss/core/_animate.scss @@ -1,33 +1,17 @@ // scss-lint:disable all -@charset "UTF-8"; - .animated { - -webkit-animation-duration: 1s; animation-duration: 1s; - -webkit-animation-fill-mode: both; - animation-fill-mode: both; + // animation-fill-mode: both; } .animated.infinite { - -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { - -webkit-animation-duration: 2s; animation-duration: 2s; } -@-webkit-keyframes fadeIn { - from { - opacity: 0; - } - - to { - opacity: 1; - } -} - @keyframes fadeIn { from { opacity: 0; @@ -39,6 +23,5 @@ } .fadeIn { - -webkit-animation-name: fadeIn; animation-name: fadeIn; } diff --git a/Vue_Full_Project/scss/core/_layout.scss b/Vue_Full_Project/scss/core/_layout.scss index 263cab56..cbab8f04 100644 --- a/Vue_Full_Project/scss/core/_layout.scss +++ b/Vue_Full_Project/scss/core/_layout.scss @@ -11,8 +11,8 @@ app-dashboard, app-root { display: flex; - min-height: 100vh; flex-direction: column; + min-height: 100vh; } .app-header { @@ -26,12 +26,12 @@ app-root { .app-body { display: flex; flex-direction: row; - overflow-x: hidden; flex-grow: 1; + overflow-x: hidden; .main { - min-width: 0; flex: 1; + min-width: 0; } .sidebar { @@ -134,11 +134,6 @@ app-root { .sidebar-minimized { .sidebar { flex: 0 0 $sidebar-minimized-width; - .sidebar-header, - .sidebar-form, - .sidebar-footer { - display: none; - } } &.sidebar-hidden { @@ -344,6 +339,10 @@ app-root { .nav { width: $mobile-sidebar-width !important; } + + .sidebar-minimizer { + display: none; + } } .main, .app-footer { diff --git a/Vue_Full_Project/scss/core/_navbar.scss b/Vue_Full_Project/scss/core/_navbar.scss index db6ace3c..ba49147d 100644 --- a/Vue_Full_Project/scss/core/_navbar.scss +++ b/Vue_Full_Project/scss/core/_navbar.scss @@ -1,7 +1,7 @@ .app-header.navbar { position: relative; - height: $navbar-height; flex-direction: row; + height: $navbar-height; padding: 0; margin: 0; background-color: $navbar-bg; @@ -101,3 +101,14 @@ .navbar-divider { background-color: rgba(0,0,0,.075); } + +.brand-minimized { + .app-header.navbar { + .navbar-brand { + width: $navbar-brand-minimized-width; + background-color: $navbar-brand-minimized-bg; + background-image: $navbar-brand-minimized-logo; + background-size: $navbar-brand-minimized-logo-size; + } + } +} diff --git a/Vue_Full_Project/scss/core/_sidebar.scss b/Vue_Full_Project/scss/core/_sidebar.scss index 2afeb8eb..407ed223 100644 --- a/Vue_Full_Project/scss/core/_sidebar.scss +++ b/Vue_Full_Project/scss/core/_sidebar.scss @@ -78,7 +78,8 @@ .nav { @include sidebar-width($sidebar-borders, $sidebar-width); - flex-direction: column !important; + flex-direction: column; + min-height: 100%; } .nav-title { @@ -148,8 +149,8 @@ } &:hover { - color: $sidebar-nav-link-hover-color !important; - background: $sidebar-nav-link-hover-bg !important; + color: $sidebar-nav-link-hover-color; + background: $sidebar-nav-link-hover-bg; @include borders($sidebar-nav-link-hover-borders); i { @@ -160,6 +161,21 @@ background-image: $sidebar-nav-dropdown-indicator-hover; } } + + @each $color, $value in $theme-colors { + &.nav-link-#{$color} { + background: $value; + i { + color: rgba(255,255,255,.7); + } + &:hover { + background: darken($value,5%) !important; + i { + color: #fff; + } + } + } + } } // ex. Components @@ -239,6 +255,39 @@ padding: $sidebar-footer-padding-y $sidebar-footer-padding-x; background: $sidebar-footer-bg; } + + .sidebar-minimizer { + position: relative; + flex: 0 0 $sidebar-minimizer-height; + background-color: $sidebar-minimizer-bg; + border: 0; + + &::before { + position: absolute; + top: 0; + right: 0; + width: $sidebar-minimizer-height; + height: $sidebar-minimizer-height; + content: ""; + background-image: $sidebar-minimizer-indicator; + background-repeat: no-repeat; + background-position: center; + background-size: $sidebar-minimizer-height / 4; + transition: .3s; + } + + &:focus, + &.focus { + outline: 0; + } + + &:hover { + background-color: $sidebar-minimizer-hover-bg; + &::before { + background-image: $sidebar-minimizer-hover-indicator; + } + } + } } @include media-breakpoint-up(lg) { @@ -312,6 +361,11 @@ display: none; } + .sidebar-minimizer::before { + width: 100%; + transform: rotate(-180deg); + } + .nav-item { width: $sidebar-minimized-width; overflow: hidden; diff --git a/Vue_Full_Project/scss/core/_variables.scss b/Vue_Full_Project/scss/core/_variables.scss index f2663a8b..790e5198 100644 --- a/Vue_Full_Project/scss/core/_variables.scss +++ b/Vue_Full_Project/scss/core/_variables.scss @@ -1,3 +1,4 @@ +// scss-lint:disable all // Core Admin Variables $enable-sidebar-nav-rounded: false !default; @@ -57,6 +58,11 @@ $navbar-brand-border: ( ) ) !default; +$navbar-brand-minimized-width: 50px !default +$navbar-brand-minimized-bg: #fff !default; +$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default; +$navbar-brand-minimized-logo-size: 24px !default; + $navbar-color: $gray-600 !default; $navbar-hover-color: $gray-800 !default; $navbar-active-color: $gray-800 !default; @@ -127,6 +133,17 @@ $sidebar-footer-bg: rgba(0,0,0,.2) !default; $sidebar-footer-padding-y: .75rem !default; $sidebar-footer-padding-x: 1rem !default; +// Sidebar Minimizer + +$sidebar-minimizer-height: 50px !default; +$sidebar-minimizer-bg: rgba(0,0,0,.2) !default; +$sidebar-minimizer-indicator-color: $gray-600 !default; +$sidebar-minimizer-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-minimizer-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-minimizer-hover-bg: rgba(0,0,0,.3) !default; +$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default; +$sidebar-minimizer-hover-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-minimizer-hover-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; + + // Top Navigation $top-nav-bg: #fff !default; diff --git a/Vue_Full_Project/scss/style.scss b/Vue_Full_Project/scss/style.scss index d719a717..4296d776 100644 --- a/Vue_Full_Project/scss/style.scss +++ b/Vue_Full_Project/scss/style.scss @@ -1,4 +1,4 @@ -/** +/*! * CoreUI - Open Source Bootstrap Admin Template * @version v1.0.0 * @link http://coreui.io diff --git a/Vue_Full_Project/src/_nav.js b/Vue_Full_Project/src/_nav.js index af4d963f..4308c3ba 100644 --- a/Vue_Full_Project/src/_nav.js +++ b/Vue_Full_Project/src/_nav.js @@ -128,6 +128,19 @@ export default { icon: 'icon-star' } ] + }, + { + name: 'Download CoreUI', + url: 'http://coreui.io/vue/', + icon: 'icon-cloud-download', + class: 'mt-auto', + variant: 'success' + }, + { + name: 'Try CoreUI PRO', + url: 'http://coreui.io/pro/vue/', + icon: 'icon-layers', + variant: 'danger' } ] } diff --git a/Vue_Full_Project/src/components/Header.vue b/Vue_Full_Project/src/components/Header.vue index 9b6bd5f8..3788b373 100644 --- a/Vue_Full_Project/src/components/Header.vue +++ b/Vue_Full_Project/src/components/Header.vue @@ -2,7 +2,7 @@
- + Dashboard Users diff --git a/Vue_Full_Project/src/components/Sidebar.vue b/Vue_Full_Project/src/components/Sidebar.vue index a926564d..1dce5fe9 100644 --- a/Vue_Full_Project/src/components/Sidebar.vue +++ b/Vue_Full_Project/src/components/Sidebar.vue @@ -21,22 +21,22 @@
  • - +
    • @@ -44,15 +44,18 @@ + diff --git a/Vue_Full_Project/src/components/SidebarNavItem.vue b/Vue_Full_Project/src/components/SidebarNavItem.vue new file mode 100644 index 00000000..bdedf21b --- /dev/null +++ b/Vue_Full_Project/src/components/SidebarNavItem.vue @@ -0,0 +1,28 @@ + + + diff --git a/Vue_Full_Project/src/components/SidebarNavLink.vue b/Vue_Full_Project/src/components/SidebarNavLink.vue index fa677c19..8bc5fcef 100644 --- a/Vue_Full_Project/src/components/SidebarNavLink.vue +++ b/Vue_Full_Project/src/components/SidebarNavLink.vue @@ -1,29 +1,58 @@ diff --git a/Vue_Full_Project/src/components/SidebarNavTitle.vue b/Vue_Full_Project/src/components/SidebarNavTitle.vue index 2879ecef..8879614f 100644 --- a/Vue_Full_Project/src/components/SidebarNavTitle.vue +++ b/Vue_Full_Project/src/components/SidebarNavTitle.vue @@ -1,5 +1,5 @@ diff --git a/Vue_Starter/src/components/Sidebar.vue b/Vue_Starter/src/components/Sidebar.vue index a926564d..1dce5fe9 100644 --- a/Vue_Starter/src/components/Sidebar.vue +++ b/Vue_Starter/src/components/Sidebar.vue @@ -21,22 +21,22 @@
  • - +
    • @@ -44,15 +44,18 @@ + diff --git a/Vue_Starter/src/components/SidebarNavItem.vue b/Vue_Starter/src/components/SidebarNavItem.vue new file mode 100644 index 00000000..bdedf21b --- /dev/null +++ b/Vue_Starter/src/components/SidebarNavItem.vue @@ -0,0 +1,28 @@ + + + diff --git a/Vue_Starter/src/components/SidebarNavLink.vue b/Vue_Starter/src/components/SidebarNavLink.vue index a845cf3d..8bc5fcef 100644 --- a/Vue_Starter/src/components/SidebarNavLink.vue +++ b/Vue_Starter/src/components/SidebarNavLink.vue @@ -1,29 +1,58 @@ diff --git a/Vue_Starter/src/components/SidebarNavTitle.vue b/Vue_Starter/src/components/SidebarNavTitle.vue index 2879ecef..8879614f 100644 --- a/Vue_Starter/src/components/SidebarNavTitle.vue +++ b/Vue_Starter/src/components/SidebarNavTitle.vue @@ -1,5 +1,5 @@