diff --git a/.gitignore b/.gitignore index 5e9eb66c94..311a2a6b97 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,7 @@ /node_modules /public/hot /public/storage +public/images /storage/*.key /vendor /.idea diff --git a/resources/assets/img/logo-symbol.png b/resources/assets/img/logo-symbol.png new file mode 100755 index 0000000000..98a1946340 Binary files /dev/null and b/resources/assets/img/logo-symbol.png differ diff --git a/resources/assets/js/backend/before.js b/resources/assets/js/backend/before.js index cde7acf125..18f059bae0 100644 --- a/resources/assets/js/backend/before.js +++ b/resources/assets/js/backend/before.js @@ -6,5 +6,5 @@ // Loaded before CoreUI app.js require('../bootstrap'); -require('../../../../node_modules/pace/pace.min'); +require('pace'); require('../plugins'); diff --git a/resources/assets/sass/backend/_bootstrap-variables.scss b/resources/assets/sass/backend/_bootstrap-variables.scss index d05c98744e..9a9c272107 100755 --- a/resources/assets/sass/backend/_bootstrap-variables.scss +++ b/resources/assets/sass/backend/_bootstrap-variables.scss @@ -76,6 +76,7 @@ $font-size-base: 0.875rem; // Breadcrumbs $breadcrumb-bg: #fff; +$breadcrumb-margin-bottom: 1.5rem; // Cards diff --git a/resources/assets/sass/backend/_core-variables.scss b/resources/assets/sass/backend/_core-variables.scss index ad1d48285c..e43dfb122a 100755 --- a/resources/assets/sass/backend/_core-variables.scss +++ b/resources/assets/sass/backend/_core-variables.scss @@ -1 +1,2 @@ -// Core Overrides +// core overrides +$navbar-brand-logo: url('../../img/logo-symbol.png'); diff --git a/resources/assets/sass/backend/_global-overrides.scss b/resources/assets/sass/backend/_global-overrides.scss deleted file mode 100644 index 165ca5c086..0000000000 --- a/resources/assets/sass/backend/_global-overrides.scss +++ /dev/null @@ -1,4 +0,0 @@ -// Global overrides - -$simple-line-font-path : "~simple-line-icons/fonts/"; -$fa-font-path: "~font-awesome/fonts/"; \ No newline at end of file diff --git a/resources/assets/sass/backend/app.scss b/resources/assets/sass/backend/app.scss index 6ef71ebad6..087a302328 100755 --- a/resources/assets/sass/backend/app.scss +++ b/resources/assets/sass/backend/app.scss @@ -1,24 +1,24 @@ -/** +/*! * CoreUI - Open Source Bootstrap Admin Template - * @version v1.0.0-alpha.6 + * @version v1.0.6 * @link http://coreui.io * Copyright (c) 2017 creativeLabs Ɓukasz Holeczek * @license MIT */ -// Variable Overrides -@import "global-overrides"; +// Override Boostrap variables @import "bootstrap-variables"; + // Font Awesome @import "~font-awesome/scss/font-awesome"; + +// Simple Line Icons @import "~simple-line-icons/scss/simple-line-icons"; // Bootstrap @import "~bootstrap/scss/bootstrap"; -// Import vendors styles -@import "vendors/vendors"; // Override core variables @import "core-variables"; @@ -27,4 +27,4 @@ @import "core/core"; // Custom styles -@import "custom"; \ No newline at end of file +@import "custom"; diff --git a/resources/assets/sass/backend/core/_animate.scss b/resources/assets/sass/backend/core/_animate.scss old mode 100755 new mode 100644 index e23d91e9d1..c0a244bae2 --- a/resources/assets/sass/backend/core/_animate.scss +++ b/resources/assets/sass/backend/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/resources/assets/sass/backend/core/_breadcrumb-menu.scss b/resources/assets/sass/backend/core/_breadcrumb-menu.scss old mode 100755 new mode 100644 index 4e70539160..dbbe07e0b2 --- a/resources/assets/sass/backend/core/_breadcrumb-menu.scss +++ b/resources/assets/sass/backend/core/_breadcrumb-menu.scss @@ -1,19 +1,19 @@ .breadcrumb-menu { - position: absolute; - top: 0; - right: $breadcrumb-padding-x; + margin-left: auto; &::before { display: none; } - .btn { - padding-top: $breadcrumb-padding-y; - padding-bottom: $breadcrumb-padding-y; + .btn-group { + vertical-align: top; } .btn { + padding: 0 $input-btn-padding-x; color: $text-muted; + vertical-align: top; + border: 0; &:hover, &.active { color: $body-color; diff --git a/resources/assets/sass/backend/core/_breadcrumb.scss b/resources/assets/sass/backend/core/_breadcrumb.scss old mode 100755 new mode 100644 index 55ece3a614..d8a003dc64 --- a/resources/assets/sass/backend/core/_breadcrumb.scss +++ b/resources/assets/sass/backend/core/_breadcrumb.scss @@ -1,6 +1,4 @@ .breadcrumb { position: relative; - margin-bottom: 1.5 * $spacer; - @include borders($breadcrumb-borders); } diff --git a/resources/assets/sass/backend/core/_callout.scss b/resources/assets/sass/backend/core/_callout.scss old mode 100755 new mode 100644 index ddd3e2260f..b98ebac53d --- a/resources/assets/sass/backend/core/_callout.scss +++ b/resources/assets/sass/backend/core/_callout.scss @@ -11,10 +11,10 @@ .chart-wrapper { position: absolute; - top: 18px; + top: 10px; left: 50%; float: right; - width: 60%; + width: 50%; } } @@ -45,7 +45,7 @@ } @each $color, $value in $theme-colors { - &.callout-#{$color} { + .callout-#{$color} { border-left-color: $value; h4 { diff --git a/resources/assets/sass/backend/core/_footer.scss b/resources/assets/sass/backend/core/_footer.scss old mode 100755 new mode 100644 index 2d678c8ced..e01595a1b9 --- a/resources/assets/sass/backend/core/_footer.scss +++ b/resources/assets/sass/backend/core/_footer.scss @@ -1,7 +1,8 @@ .app-footer { - min-height: $footer-height; + display: flex; + flex-wrap: wrap; + align-items: center; padding: 0 $spacer; - line-height: $footer-height; color: $footer-color; background: $footer-bg; @include borders($footer-borders); diff --git a/resources/assets/sass/backend/core/_layout.scss b/resources/assets/sass/backend/core/_layout.scss old mode 100755 new mode 100644 index ad6dda29d5..8a050031ee --- a/resources/assets/sass/backend/core/_layout.scss +++ b/resources/assets/sass/backend/core/_layout.scss @@ -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; } @@ -146,14 +137,12 @@ app-root { } &.sidebar-hidden { - .sidebar { margin-left: - $sidebar-minimized-width; } } &.sidebar-fixed { - .main, .app-footer { margin-left: $sidebar-minimized-width; } @@ -163,7 +152,6 @@ app-root { } &.sidebar-hidden { - .main, .app-footer { margin-left: 0; } @@ -176,14 +164,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 +185,6 @@ app-root { } &.aside-menu-hidden { - .main, .app-footer { margin-right: 0; } @@ -223,7 +208,6 @@ app-root { // Breadcrumb // .breadcrumb-fixed { - .main { $breadcrumb-height: 2 * $breadcrumb-padding-y + $font-size-base + 1.5 * $spacer; padding-top: $breadcrumb-height; @@ -283,12 +267,13 @@ app-root { // Footer // .footer-fixed { - .app-footer { position: fixed; + right: 0; bottom: 0; + left: 0; z-index: $zindex-sticky; - width: 100%; + height: $footer-height; } .app-body { @@ -306,6 +291,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 +303,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) { @@ -341,15 +330,29 @@ app-root { margin-top: $navbar-height; } + .breadcrumb-fixed { + .main:nth-child(2) .breadcrumb { + right: auto; + left: auto; + width: 100%; + } + } + .sidebar { position: fixed; + z-index: $zindex-sticky - 1; width: $mobile-sidebar-width; - height: 100%; + height: calc(100vh - #{$navbar-height}); margin-left: - $mobile-sidebar-width; .sidebar-nav, .nav { - width: $mobile-sidebar-width !important; + width: $mobile-sidebar-width; + min-height: calc(100vh - #{$navbar-height}); + } + + .sidebar-minimizer { + display: none; } } @@ -368,14 +371,9 @@ app-root { } .sidebar-mobile-show { - .sidebar { width: $mobile-sidebar-width; margin-left: 0; - - .sidebar-nav { - height: calc(100vh - #{$navbar-height}); - } } .main { @@ -383,11 +381,4 @@ app-root { margin-left: $mobile-sidebar-width !important; } } - - .breadcrumb-fixed { - .main .breadcrumb { - right: 0 !important; - left: 0 !important; - } - } } diff --git a/resources/assets/sass/backend/core/_navbar.scss b/resources/assets/sass/backend/core/_navbar.scss old mode 100755 new mode 100644 index 8d321e80cf..221ab1263e --- a/resources/assets/sass/backend/core/_navbar.scss +++ b/resources/assets/sass/backend/core/_navbar.scss @@ -22,7 +22,17 @@ } .navbar-toggler { - color: $navbar-color; + min-width: 50px; + padding: $navbar-toggler-padding-y 0; + + &:hover .navbar-toggler-icon { + background-image: $navbar-toggler-icon-hover; + } + } + + .navbar-toggler-icon { + height: 23px; + background-image: $navbar-toggler-icon; } .navbar-nav { @@ -101,3 +111,17 @@ .navbar-divider { background-color: rgba(0,0,0,.075); } + +@include media-breakpoint-up(lg) { + .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; + @include borders($navbar-brand-minimized-border); + } + } + } +} diff --git a/resources/assets/sass/backend/core/_rtl.scss b/resources/assets/sass/backend/core/_rtl.scss old mode 100755 new mode 100644 index 22bda316c7..28db385962 --- a/resources/assets/sass/backend/core/_rtl.scss +++ b/resources/assets/sass/backend/core/_rtl.scss @@ -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; - } - } } diff --git a/resources/assets/sass/backend/core/_sidebar.scss b/resources/assets/sass/backend/core/_sidebar.scss old mode 100755 new mode 100644 index df64989047..b77cd5f852 --- a/resources/assets/sass/backend/core/_sidebar.scss +++ b/resources/assets/sass/backend/core/_sidebar.scss @@ -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,181 +74,219 @@ 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; + flex-direction: column; + min-height: 100%; + } + + .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-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 { + padding: 0; + list-style: none; } + } - .divider { - height: 10px; + .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; } - .nav-item { - position: relative; - margin: 0; - transition: background .3s ease-in-out; + 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; + } - ul { - max-height: 0; - padding: 0; - margin: 0; - overflow-y: hidden; - transition: max-height .3s ease-in-out; + .badge { + float: right; + margin-top: 2px; + } - li { - padding: 0; - list-style: none; - } - } + &.active { + color: $sidebar-nav-link-active-color; + background: $sidebar-nav-link-active-bg; + @include borders($sidebar-nav-link-active-borders); - .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; - } + 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); + &:hover { + color: $sidebar-nav-link-hover-color; + background: $sidebar-nav-link-hover-bg; + @include borders($sidebar-nav-link-hover-borders); - i { - color: $sidebar-nav-link-hover-icon-color; - } - } + 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); + &.nav-dropdown-toggle::before { + 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: $sidebar-nav-link-active-icon-color; + color: #fff; } } + } + } + } - [class^="icon-"], [class*=" icon-"] { - display: inline-block; - margin-top: -4px; - vertical-align: middle; - } + // ex. Components + .nav-dropdown-toggle { + position: relative; - 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; - } + &::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; + } + } - .badge { - float: right; - margin-top: 2px; - // margin-left: 10px; - } + // ex.