improvements

Author: mrholek

AJAX_Full_Project_GULP/css/style.css

@@ -6,23 +6,15 @@
  * @license MIT
  */
 /*!
- * Bootstrap v4.0.0-alpha.6 (https://getbootstrap.com)
+ * Bootstrap v4.0.0-beta (https://getbootstrap.com)
  * Copyright 2011-2017 The Bootstrap Authors
  * Copyright 2011-2017 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
  */
 @media print {
   *,
   *::before,
-  *::after,
-  p::first-letter,
-  div::first-letter,
-  blockquote::first-letter,
-  li::first-letter,
-  p::first-line,
-  div::first-line,
-  blockquote::first-line,
-  li::first-line {
+  *::after {
     text-shadow: none !important;
     box-shadow: none !important; }
   a,
@@ -494,30 +486,28 @@ pre {
   margin-right: auto;
   margin-left: auto;
   padding-right: 15px;
-  padding-left: 15px; }
+  padding-left: 15px;
+  width: 100%; }
   @media (min-width: 576px) {
     .container {
-      width: 540px;
-      max-width: 100%; } }
+      max-width: 540px; } }
   @media (min-width: 768px) {
     .container {
-      width: 720px;
-      max-width: 100%; } }
+      max-width: 720px; } }
   @media (min-width: 992px) {
     .container {
-      width: 960px;
-      max-width: 100%; } }
+      max-width: 960px; } }
   @media (min-width: 1200px) {
     .container {
-      width: 1140px;
-      max-width: 100%; } }
+      max-width: 1140px; } }
 
 .container-fluid {
   width: 100%;
   margin-right: auto;
   margin-left: auto;
   padding-right: 15px;
-  padding-left: 15px; }
+  padding-left: 15px;
+  width: 100%; }
 
 .row {
   display: flex;
@@ -1718,7 +1708,8 @@ fieldset[disabled] a.btn {
   .btn-link, .btn-link:active, .btn-link.active, .btn-link:disabled {
     background-color: transparent; }
   .btn-link, .btn-link:focus, .btn-link:active {
-    border-color: transparent; }
+    border-color: transparent;
+    box-shadow: none; }
   .btn-link:hover {
     border-color: transparent; }
   .btn-link:focus, .btn-link:hover {
@@ -1793,6 +1784,10 @@ tbody.collapse.show {
 .dropdown-toggle:empty::after {
   margin-left: 0; }
 
+.dropup .dropdown-menu {
+  margin-top: 0;
+  margin-bottom: 0.125rem; }
+
 .dropup .dropdown-toggle::after {
   border-top: 0;
   border-bottom: 0.3em solid; }
@@ -2233,12 +2228,6 @@ tbody.collapse.show {
     flex-wrap: wrap;
     align-items: center;
     justify-content: space-between; }
-    @media (max-width: 575px) {
-      .navbar > .container,
-      .navbar > .container-fluid {
-        width: 100%;
-        margin-right: 0;
-        margin-left: 0; } }
 
 .navbar-brand {
   display: inline-block;
@@ -2270,7 +2259,8 @@ tbody.collapse.show {
   padding-bottom: 0.5rem; }
 
 .navbar-collapse {
-  flex-basis: 100%; }
+  flex-basis: 100%;
+  align-items: center; }
 
 .navbar-toggler {
   padding: 0.25rem 0.75rem;
@@ -3612,6 +3602,9 @@ a.bg-light:focus, a.bg-light:hover {
 a.bg-dark:focus, a.bg-dark:hover {
   background-color: #151b1f !important; }
 
+.bg-white {
+  background-color: #fff !important; }
+
 .bg-transparent {
   background-color: transparent !important; }
 
@@ -3657,6 +3650,9 @@ a.bg-dark:focus, a.bg-dark:hover {
 .border-dark {
   border-color: #29363d !important; }
 
+.border-white {
+  border-color: #fff !important; }
+
 .rounded {
   border-radius: 0.25rem !important; }
 
@@ -5538,7 +5534,7 @@ a.text-dark:focus, a.text-dark:hover {
   color: #151b1f !important; }
 
 .text-muted {
-  color: #869fac !important; }
+  color: #536c79 !important; }
 
 .text-hide {
   font: 0/0 a;
@@ -7004,15 +7000,14 @@ base-chart.chart {
 .dropdown-menu-lg {
   width: 250px; }
 
-.navbar-nav .dropdown-menu {
-  position: absolute;
-  float: none; }
+.app-header .navbar-nav .dropdown-menu {
+  position: absolute; }
 
-.dropdown-menu-right {
+.app-header .navbar-nav .dropdown-menu-right {
   right: 0;
   left: auto; }
 
-.dropdown-menu-left {
+.app-header .navbar-nav .dropdown-menu-left {
   right: auto;
   left: 0; }
 
@@ -7255,8 +7250,8 @@ base-chart.chart {
   position: relative;
   flex-direction: row;
   height: 55px;
-  margin: 0;
   padding: 0;
+  margin: 0;
   background-color: #fff;
   border-bottom: 1px solid #c2cfd6; }
   .app-header.navbar .navbar-brand {
@@ -7286,8 +7281,8 @@ base-chart.chart {
     .app-header.navbar .nav-item .nav-link, .app-header.navbar .nav-item .dropdown-toggle {
       padding-top: 0;
       padding-bottom: 0;
-      border: 0;
-      background: 0; }
+      background: 0;
+      border: 0; }
       .app-header.navbar .nav-item .nav-link .badge, .app-header.navbar .nav-item .dropdown-toggle .badge {
         position: absolute;
         top: 50%;
@@ -8429,18 +8424,18 @@ app-root {
 
 .breadcrumb-fixed .breadcrumb {
   position: fixed;
-  z-index: 1018;
   top: 55px;
+  right: 0;
   left: 0;
-  right: 0; }
+  z-index: 1018; }
 
 .breadcrumb-fixed .main:nth-child(2) .breadcrumb {
-  left: 200px;
-  right: 250px; }
+  right: 250px;
+  left: 200px; }
 
 .breadcrumb-fixed .main:first-child .breadcrumb {
-  left: 0;
-  right: 250px; }
+  right: 250px;
+  left: 0; }
 
 .breadcrumb-fixed .main:last-child .breadcrumb {
   right: 0; }
@@ -8477,23 +8472,14 @@ app-root {
   .app-header {
     position: fixed !important;
     z-index: 1020;
-    width: 100%; }
-    .app-header .navbar-toggler {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 70px;
-      height: inherit; }
+    width: 100%;
+    text-align: center; }
     .app-header .navbar-toggler {
       color: #536c79; }
     .app-header .navbar-brand {
-      width: 100% !important;
-      margin: 0 auto !important; }
-    .app-header .navbar-nav {
       position: absolute;
-      top: 0;
-      right: 15px;
-      height: inherit; }
+      left: 50%;
+      margin-left: -77.5px; }
   .app-body {
     margin-top: 55px; }
   .sidebar {
@@ -8506,8 +8492,6 @@ app-root {
       width: 220px !important; }
   .main, .app-footer {
     margin-left: 0 !important; }
-  .aside-menu {
-    margin-right: -250px; }
   .sidebar-hidden .sidebar {
     margin-left: -220px; }
   .sidebar-mobile-show .sidebar {
@@ -8519,8 +8503,8 @@ app-root {
     margin-right: -220px !important;
     margin-left: 220px !important; }
   .breadcrumb-fixed .main .breadcrumb {
-    left: 0 !important;
-    right: 0 !important; } }
+    right: 0 !important;
+    left: 0 !important; } }
 
 hr.transparent {
   border-top: 1px solid transparent; }

AJAX_Full_Project_GULP/scss/core/_dropdown.scss

@@ -47,25 +47,23 @@
 .dropdown-menu-lg {
   width: 250px;
 }
+.app-header {
+  .navbar-nav {
+    .dropdown-menu {
+      position: absolute;
+    }
+    // Menu positioning
+    //
+    // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
+    // menu with the parent.
+    .dropdown-menu-right {
+      right: 0;
+      left: auto; // Reset the default from `.dropdown-menu`
+    }
 
-.navbar-nav {
-
-  .dropdown-menu {
-    position: absolute;
-    float: none;
+    .dropdown-menu-left {
+      right: auto;
+      left: 0;
+    }
   }
 }
-
-// Menu positioning
-//
-// Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
-// menu with the parent.
-.dropdown-menu-right {
-  right: 0;
-  left: auto; // Reset the default from `.dropdown-menu`
-}
-
-.dropdown-menu-left {
-  right: auto;
-  left: 0;
-}

AJAX_Full_Project_GULP/scss/core/_layout.scss

@@ -6,7 +6,7 @@
   }
 }
 
-// app-dashboard and app-root are Angular2 selectors. You can add here your own selectors if you need.
+// app-dashboard and app-root are Angular2+ selectors. You can add here your own selectors if you need.
 .app,
 app-dashboard,
 app-root {
@@ -231,25 +231,25 @@ app-root {
 
   .breadcrumb {
     position: fixed;
-    z-index: $zindex-sticky - 2;
     top: $navbar-height;
-    left: 0;
     right: 0;
+    left: 0;
+    z-index: $zindex-sticky - 2;
   }
 
   // if sidebar + main + aside
   .main:nth-child(2) {
     .breadcrumb {
-      left: $sidebar-width;
       right: $aside-menu-width;
+      left: $sidebar-width;
     }
   }
 
   // if sidebar + main
   .main:first-child {
     .breadcrumb {
-      left: 0;
       right: $aside-menu-width;
+      left: 0;
     }
   }
 
@@ -320,14 +320,7 @@ app-root {
     position: fixed !important;
     z-index: $zindex-sticky;
     width: 100%;
-
-    .navbar-toggler {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 70px;
-      height: inherit;
-    }
+    text-align: center;
 
     .navbar-toggler {
       @if (lightness( $navbar-brand-bg ) > 40) {
@@ -338,15 +331,9 @@ app-root {
     }
 
     .navbar-brand {
-      width: 100% !important;
-      margin: 0 auto !important;
-    }
-
-    .navbar-nav {
       position: absolute;
-      top: 0;
-      right: 15px;
-      height: inherit;
+      left: 50%;
+      margin-left: - ($navbar-brand-width / 2);
     }
   }
 
@@ -370,9 +357,9 @@ app-root {
     margin-left: 0 !important;
   }
 
-  .aside-menu {
-    margin-right: - $aside-menu-width;
-  }
+  // .aside-menu {
+  //   margin-right: - $aside-menu-width;
+  // }
 
   .sidebar-hidden {
     .sidebar {
@@ -399,8 +386,8 @@ app-root {
 
   .breadcrumb-fixed {
     .main .breadcrumb {
-      left: 0 !important;
       right: 0 !important;
+      left: 0 !important;
     }
   }
 }