From 6a94c6d6dcf9bb269d5de51525af3593c77b77b2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= <lukasz@holeczek.pl>
Date: Sat, 8 Oct 2016 14:24:34 +0200
Subject: [PATCH] Upgrade Angular2 Version and ng2-charts, fix #43 problem
---
Angular2_CLI_Full_Project/package.json | 30 +++----
.../scss/bootstrap_custom/_breadcrumb.scss | 2 +-
.../scss/bootstrap_custom/_card.scss | 8 +-
.../scss/core/_aside.scss | 5 ++
.../scss/core/_breadcrumb-menu.scss | 6 +-
.../scss/core/_custom-variables.scss | 1 +
.../scss/core/_mobile.scss | 10 +--
.../scss/core/bootstrap-variables.scss | 13 +++
.../scss/core/layouts/_default.scss | 0
.../scss/core/layouts/_layout-1.scss | 3 +
.../src/app/charts/charts.component.html | 12 +--
.../app/dashboard/dashboard.component.html | 65 ++++++--------
.../src/app/widgets/widgets.component.html | 86 +++++++-----------
.../src/assets/css/style.css | 90 ++++++++++---------
Angular_Full_Project_GULP/css/style.css | 90 ++++++++++---------
Angular_Full_Project_GULP/gulpfile.js | 7 +-
.../scss/bootstrap_custom/_breadcrumb.scss | 2 +-
.../scss/bootstrap_custom/_card.scss | 8 +-
.../scss/core/_aside.scss | 5 ++
.../scss/core/_breadcrumb-menu.scss | 6 +-
.../scss/core/_custom-variables.scss | 1 +
.../scss/core/_mobile.scss | 10 +--
.../scss/core/bootstrap-variables.scss | 13 +++
Angular_Starter_GULP/css/style.css | 90 ++++++++++---------
Angular_Starter_GULP/gulpfile.js | 7 +-
.../scss/bootstrap_custom/_breadcrumb.scss | 2 +-
.../scss/bootstrap_custom/_card.scss | 8 +-
Angular_Starter_GULP/scss/core/_aside.scss | 5 ++
.../scss/core/_breadcrumb-menu.scss | 6 +-
.../scss/core/_custom-variables.scss | 1 +
Angular_Starter_GULP/scss/core/_mobile.scss | 10 +--
.../scss/core/bootstrap-variables.scss | 13 +++
Static_Full_Project_GULP/css/style.css | 90 ++++++++++---------
Static_Full_Project_GULP/gulpfile.js | 8 +-
.../scss/bootstrap_custom/_breadcrumb.scss | 2 +-
.../scss/bootstrap_custom/_card.scss | 8 +-
.../scss/core/_aside.scss | 5 ++
.../scss/core/_breadcrumb-menu.scss | 6 +-
.../scss/core/_custom-variables.scss | 1 +
.../scss/core/_mobile.scss | 10 +--
.../scss/core/bootstrap-variables.scss | 13 +++
Static_Starter_GULP/css/style.css | 90 ++++++++++---------
Static_Starter_GULP/gulpfile.js | 8 +-
.../scss/bootstrap_custom/_breadcrumb.scss | 2 +-
.../scss/bootstrap_custom/_card.scss | 8 +-
Static_Starter_GULP/scss/core/_aside.scss | 5 ++
.../scss/core/_breadcrumb-menu.scss | 6 +-
.../scss/core/_custom-variables.scss | 1 +
Static_Starter_GULP/scss/core/_mobile.scss | 10 +--
.../scss/core/bootstrap-variables.scss | 13 +++
jQuery_Full_Project_GULP/css/style.css | 90 ++++++++++---------
jQuery_Full_Project_GULP/gulpfile.js | 8 +-
.../scss/bootstrap_custom/_breadcrumb.scss | 2 +-
.../scss/bootstrap_custom/_card.scss | 8 +-
.../scss/core/_aside.scss | 5 ++
.../scss/core/_breadcrumb-menu.scss | 6 +-
.../scss/core/_custom-variables.scss | 1 +
.../scss/core/_mobile.scss | 10 +--
.../scss/core/bootstrap-variables.scss | 13 +++
jQuery_Starter_GULP/css/style.css | 90 ++++++++++---------
jQuery_Starter_GULP/gulpfile.js | 8 +-
.../scss/bootstrap_custom/_breadcrumb.scss | 2 +-
.../scss/bootstrap_custom/_card.scss | 8 +-
jQuery_Starter_GULP/scss/core/_aside.scss | 5 ++
.../scss/core/_breadcrumb-menu.scss | 6 +-
.../scss/core/_custom-variables.scss | 1 +
jQuery_Starter_GULP/scss/core/_mobile.scss | 10 +--
.../scss/core/bootstrap-variables.scss | 13 +++
68 files changed, 670 insertions(+), 517 deletions(-)
create mode 100644 Angular2_CLI_Full_Project/scss/core/layouts/_default.scss
create mode 100644 Angular2_CLI_Full_Project/scss/core/layouts/_layout-1.scss
diff --git a/Angular2_CLI_Full_Project/package.json b/Angular2_CLI_Full_Project/package.json
index cbaf547..7469663 100644
--- a/Angular2_CLI_Full_Project/package.json
+++ b/Angular2_CLI_Full_Project/package.json
@@ -16,29 +16,29 @@
},
"private": true,
"dependencies": {
- "@angular/common": "2.0.0",
- "@angular/compiler": "2.0.0",
- "@angular/core": "2.0.0",
- "@angular/forms": "2.0.0",
- "@angular/http": "2.0.0",
- "@angular/platform-browser": "2.0.0",
- "@angular/platform-browser-dynamic": "2.0.0",
- "@angular/router": "3.0.0",
- "@angular/upgrade": "2.0.0",
+ "@angular/common": "2.0.2",
+ "@angular/compiler": "2.0.2",
+ "@angular/core": "2.0.2",
+ "@angular/forms": "2.0.2",
+ "@angular/http": "2.0.2",
+ "@angular/platform-browser": "2.0.2",
+ "@angular/platform-browser-dynamic": "2.0.2",
+ "@angular/router": "3.0.2",
+ "@angular/upgrade": "2.0.2",
"core-js": "^2.4.0",
"rxjs": "5.0.0-beta.12",
"ts-helpers": "^1.1.1",
"zone.js": "0.6.25",
"chart.js": "^2.3.0",
- "ng2-bootstrap": "^1.1.5",
- "ng2-charts": "^1.3.0",
+ "ng2-bootstrap": "^1.1.11",
+ "ng2-charts": "^1.4.0",
"moment": "^2.15.1"
},
"devDependencies": {
- "@types/jasmine": "^2.2.34",
- "angular-cli": "1.0.0-beta.15",
- "codelyzer": "~0.0.26",
+ "@types/jasmine": "^2.5.35",
+ "angular-cli": "1.0.0-beta.17",
+ "codelyzer": "1.0.0-beta.0",
"jasmine-core": "^2.5.2",
"jasmine-spec-reporter": "2.7.0",
"karma": "1.3.0",
@@ -46,7 +46,7 @@
"karma-jasmine": "^1.0.2",
"karma-remap-istanbul": "^0.2.1",
"protractor": "4.0.9",
- "ts-node": "1.3.0",
+ "ts-node": "1.4.1",
"tslint": "^3.15.1",
"typescript": "^2.0.3"
}
diff --git a/Angular2_CLI_Full_Project/scss/bootstrap_custom/_breadcrumb.scss b/Angular2_CLI_Full_Project/scss/bootstrap_custom/_breadcrumb.scss
index f81645e..2185ebd 100644
--- a/Angular2_CLI_Full_Project/scss/bootstrap_custom/_breadcrumb.scss
+++ b/Angular2_CLI_Full_Project/scss/bootstrap_custom/_breadcrumb.scss
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5 * $spacer-y;
@include borders($breadcrumb-borders);
}
diff --git a/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss b/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss
index 42c34be..0e24830 100644
--- a/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss
+++ b/Angular2_CLI_Full_Project/scss/bootstrap_custom/_card.scss
@@ -1,7 +1,5 @@
.card {
-
- margin-bottom: 20px;
-
+ margin-bottom: 1.5 * $spacer-y;
}
.card-header {
@@ -222,3 +220,7 @@
}
}
}
+
+.card-group {
+ margin-bottom: 1.5 * $spacer-y;
+}
diff --git a/Angular2_CLI_Full_Project/scss/core/_aside.scss b/Angular2_CLI_Full_Project/scss/core/_aside.scss
index c894be8..123dff1 100644
--- a/Angular2_CLI_Full_Project/scss/core/_aside.scss
+++ b/Angular2_CLI_Full_Project/scss/core/_aside.scss
@@ -11,10 +11,15 @@
@include borders($aside-menu-borders);
.nav-tabs {
+ border-color: $border-color;
.nav-link {
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
color: $body-color;
border-top: 0;
+ &.active {
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ }
}
.nav-item:first-child {
.nav-link {
diff --git a/Angular2_CLI_Full_Project/scss/core/_breadcrumb-menu.scss b/Angular2_CLI_Full_Project/scss/core/_breadcrumb-menu.scss
index 0d0fb1b..d1230bc 100644
--- a/Angular2_CLI_Full_Project/scss/core/_breadcrumb-menu.scss
+++ b/Angular2_CLI_Full_Project/scss/core/_breadcrumb-menu.scss
@@ -2,14 +2,14 @@
position: absolute;
top: 0;
right: $breadcrumb-padding-x;
- line-height: 43px;
&:before {
display: none;
}
- .btn-group {
- margin-top: -2px;
+ .btn {
+ padding-top: $breadcrumb-padding-y;
+ padding-bottom: $breadcrumb-padding-y;
}
.btn.btn-secondary {
diff --git a/Angular2_CLI_Full_Project/scss/core/_custom-variables.scss b/Angular2_CLI_Full_Project/scss/core/_custom-variables.scss
index 8d444a3..6450db3 100644
--- a/Angular2_CLI_Full_Project/scss/core/_custom-variables.scss
+++ b/Angular2_CLI_Full_Project/scss/core/_custom-variables.scss
@@ -74,6 +74,7 @@ $sidebar-bg: $gray-dark;
$sidebar-header-bg: rgba(0,0,0,.2);
$sidebar-footer-bg: rgba(0,0,0,.2);
$sidebar-borders: none;
+$mobile-sidebar-width: 200px;
// Sidebar Navigation
diff --git a/Angular2_CLI_Full_Project/scss/core/_mobile.scss b/Angular2_CLI_Full_Project/scss/core/_mobile.scss
index 04cfe07..be5d659 100644
--- a/Angular2_CLI_Full_Project/scss/core/_mobile.scss
+++ b/Angular2_CLI_Full_Project/scss/core/_mobile.scss
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
- $mobile-nav-width: 200px;
+ $mobile-sidebar-width: 200px;
body {
padding: 0 !important;
@@ -36,11 +36,11 @@
}
.sidebar {
- width: $mobile-nav-width;
- margin-left: -$mobile-nav-width;
+ width: $mobile-sidebar-width;
+ margin-left: -$mobile-sidebar-width;
.sidebar-footer {
- margin-left: -$mobile-nav-width;
+ margin-left: -$mobile-sidebar-width;
}
}
@@ -77,7 +77,7 @@
}
.main {
- margin-left: $mobile-nav-width !important;
+ margin-left: $mobile-sidebar-width !important;
}
}
}
diff --git a/Angular2_CLI_Full_Project/scss/core/bootstrap-variables.scss b/Angular2_CLI_Full_Project/scss/core/bootstrap-variables.scss
index fb2400c..4d04caf 100644
--- a/Angular2_CLI_Full_Project/scss/core/bootstrap-variables.scss
+++ b/Angular2_CLI_Full_Project/scss/core/bootstrap-variables.scss
@@ -84,3 +84,16 @@ $card-cap-bg: $gray-lightest;
$dropdown-padding-y: 0;
$dropdown-border-color: $gray-lighter;
$dropdown-divider-bg: $gray-lightest;
+
+// Buttons
+
+$btn-secondary-border: $gray-light;
+
+// Progress bars
+
+$progress-bg: $gray-lightest;
+
+// Tables
+
+$table-bg-accent: $gray-lightest;
+$table-bg-hover: $gray-lightest;
diff --git a/Angular2_CLI_Full_Project/scss/core/layouts/_default.scss b/Angular2_CLI_Full_Project/scss/core/layouts/_default.scss
new file mode 100644
index 0000000..e69de29
diff --git a/Angular2_CLI_Full_Project/scss/core/layouts/_layout-1.scss b/Angular2_CLI_Full_Project/scss/core/layouts/_layout-1.scss
new file mode 100644
index 0000000..96b2801
--- /dev/null
+++ b/Angular2_CLI_Full_Project/scss/core/layouts/_layout-1.scss
@@ -0,0 +1,3 @@
+body.layout-1 {
+
+}
diff --git a/Angular2_CLI_Full_Project/src/app/charts/charts.component.html b/Angular2_CLI_Full_Project/src/app/charts/charts.component.html
index acc76f1..30dd0e8 100644
--- a/Angular2_CLI_Full_Project/src/app/charts/charts.component.html
+++ b/Angular2_CLI_Full_Project/src/app/charts/charts.component.html
@@ -11,7 +11,7 @@
</div>
<div class="card-block">
<div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColours" [legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></base-chart>
+ <canvas baseChart class="chart" [datasets]="lineChartData" [labels]="lineChartLabels" [options]="lineChartOptions" [colors]="lineChartColours" [legend]="lineChartLegend" [chartType]="lineChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -26,7 +26,7 @@
</div>
<div class="card-block">
<div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></base-chart>
+ <canvas baseChart class="chart" [datasets]="barChartData" [labels]="barChartLabels" [options]="barChartOptions" [legend]="barChartLegend" [chartType]="barChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -41,7 +41,7 @@
</div>
<div class="card-block">
<div class="chart-wrapper">
- <base-chart class="chart" [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></base-chart>
+ <canvas baseChart class="chart" [data]="doughnutChartData" [labels]="doughnutChartLabels" [chartType]="doughnutChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -56,7 +56,7 @@
</div>
<div class="card-block">
<div class="chart-wrapper">
- <base-chart class="chart" [datasets]="radarChartData" [labels]="radarChartLabels" [chartType]="radarChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></base-chart>
+ <canvas baseChart class="chart" [datasets]="radarChartData" [labels]="radarChartLabels" [chartType]="radarChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -71,7 +71,7 @@
</div>
<div class="card-block">
<div class="chart-wrapper">
- <base-chart class="chart" [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></base-chart>
+ <canvas baseChart class="chart" [data]="pieChartData" [labels]="pieChartLabels" [chartType]="pieChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -86,7 +86,7 @@
</div>
<div class="card-block">
<div class="chart-wrapper">
- <base-chart class="chart" [data]="polarAreaChartData" [labels]="polarAreaChartLabels" [legend]="polarAreaLegend" [chartType]="polarAreaChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></base-chart>
+ <canvas baseChart class="chart" [data]="polarAreaChartData" [labels]="polarAreaChartLabels" [legend]="polarAreaLegend" [chartType]="polarAreaChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
diff --git a/Angular2_CLI_Full_Project/src/app/dashboard/dashboard.component.html b/Angular2_CLI_Full_Project/src/app/dashboard/dashboard.component.html
index 3732fac..0e72f79 100644
--- a/Angular2_CLI_Full_Project/src/app/dashboard/dashboard.component.html
+++ b/Angular2_CLI_Full_Project/src/app/dashboard/dashboard.component.html
@@ -16,9 +16,8 @@
<h4 class="m-b-0">9.823</h4>
<p>Members online</p>
</div>
- <div class="chart-wrapper p-x-1">
- <base-chart class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <div class="chart-wrapper p-x-1" style="height:70px;">
+ <canvas baseChart class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -33,8 +32,7 @@
<p>Members online</p>
</div>
<div class="chart-wrapper p-x-1" style="height:70px;">
- <base-chart class="chart" [datasets]="lineChart2Data" [labels]="lineChart2Labels" [options]="lineChart2Options" [colors]="lineChart2Colours" [legend]="lineChart2Legend" [chartType]="lineChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="lineChart2Data" [labels]="lineChart2Labels" [options]="lineChart2Options" [colors]="lineChart2Colours" [legend]="lineChart2Legend" [chartType]="lineChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -56,8 +54,7 @@
<p>Members online</p>
</div>
<div class="chart-wrapper" style="height:70px;">
- <base-chart class="chart" [datasets]="lineChart3Data" [labels]="lineChart3Labels" [options]="lineChart3Options" [colors]="lineChart3Colours" [legend]="lineChart3Legend" [chartType]="lineChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="lineChart3Data" [labels]="lineChart3Labels" [options]="lineChart3Options" [colors]="lineChart3Colours" [legend]="lineChart3Legend" [chartType]="lineChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -79,8 +76,7 @@
<p>Members online</p>
</div>
<div class="chart-wrapper p-x-1" style="height:70px;">
- <base-chart class="chart" [datasets]="barChart1Data" [labels]="barChart1Labels" [options]="barChart1Options" [colors]="barChart1Colours" [legend]="barChart1Legend" [chartType]="barChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="barChart1Data" [labels]="barChart1Labels" [options]="barChart1Options" [colors]="barChart1Colours" [legend]="barChart1Legend" [chartType]="barChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -115,8 +111,7 @@
</div>
</div>
<div class="chart-wrapper" style="height:300px;margin-top:40px;">
- <base-chart class="chart" [datasets]="mainChartData" [labels]="mainChartLabels" [options]="mainChartOptions" [colors]="mainChartColours" [legend]="mainChartLegend" [chartType]="mainChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:300px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="mainChartData" [labels]="mainChartLabels" [options]="mainChartOptions" [colors]="mainChartColours" [legend]="mainChartLegend" [chartType]="mainChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
<div class="card-footer">
@@ -155,8 +150,7 @@
<div class="social-box facebook">
<i class="fa fa-facebook"></i>
<div class="chart-wrapper">
- <base-chart class="chart" [datasets]="socialChartData1" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:90px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="socialChartData1" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
<ul>
<li>
@@ -176,8 +170,7 @@
<div class="social-box twitter">
<i class="fa fa-twitter"></i>
<div class="chart-wrapper">
- <base-chart class="chart" [datasets]="socialChartData2" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:90px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="socialChartData2" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
<ul>
<li>
@@ -197,8 +190,7 @@
<div class="social-box linkedin">
<i class="fa fa-linkedin"></i>
<div class="chart-wrapper">
- <base-chart class="chart" [datasets]="socialChartData3" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:90px;"></base-chart>>
+ <canvas baseChart class="chart" [datasets]="socialChartData3" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>>
</div>
<ul>
<li>
@@ -218,8 +210,7 @@
<div class="social-box google-plus">
<i class="fa fa-google-plus"></i>
<div class="chart-wrapper">
- <base-chart class="chart" [datasets]="socialChartData4" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:90px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="socialChartData4" [labels]="socialChartLabels" [options]="socialChartOptions" [colors]="socialChartColours" [legend]="socialChartLegend" [chartType]="socialChartType" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
<ul>
<li>
@@ -252,9 +243,9 @@
<small class="text-muted">New Clients</small>
<br>
<strong class="h4">9,123</strong>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="sparklineChartData1" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartInfo" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
- (chartClick)="chartClicked($event)" style="width:100px; height:30px;"></base-chart>
+ <div class="chart-wrapper" style="width:100px;height:30px;">
+ <canvas baseChart class="chart" [datasets]="sparklineChartData1" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartInfo" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
+ (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -264,9 +255,9 @@
<small class="text-muted">Recuring Clients</small>
<br>
<strong class="h4">22,643</strong>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="sparklineChartData2" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartDanger" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
- (chartClick)="chartClicked($event)" style="width:100px; height:30px;"></base-chart>
+ <div class="chart-wrapper" style="width:100px;height:30px;">
+ <canvas baseChart class="chart" [datasets]="sparklineChartData2" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartDanger" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
+ (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -354,9 +345,9 @@
<small class="text-muted">Pageviews</small>
<br>
<strong class="h4">78,623</strong>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="sparklineChartData1" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartWarning" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
- (chartClick)="chartClicked($event)" style="width:100px; height:30px;"></base-chart>
+ <div class="chart-wrapper" style="width:100px;height:30px;">
+ <canvas baseChart class="chart" [datasets]="sparklineChartData1" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartWarning" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
+ (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -366,9 +357,9 @@
<small class="text-muted">Organic</small>
<br>
<strong class="h4">49,123</strong>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="sparklineChartData2" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartSuccess" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
- (chartClick)="chartClicked($event)" style="width:100px; height:30px;"></base-chart>
+ <div class="chart-wrapper" style="width:100px;height:30px;">
+ <canvas baseChart class="chart" [datasets]="sparklineChartData2" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartSuccess" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
+ (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -448,9 +439,9 @@
<small class="text-muted">CTR</small>
<br>
<strong class="h4">23%</strong>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="sparklineChartData1" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartDefault" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
- (chartClick)="chartClicked($event)" style="width:100px; height:30px;"></base-chart>
+ <div class="chart-wrapper" style="width:100px;height:30px;">
+ <canvas baseChart class="chart" [datasets]="sparklineChartData1" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartDefault" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
+ (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -460,9 +451,9 @@
<small class="text-muted">Bounce Rate</small>
<br>
<strong class="h4">5%</strong>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="sparklineChartData2" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartPrimary" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
- (chartClick)="chartClicked($event)" style="width:100px; height:30px;"></base-chart>
+ <div class="chart-wrapper" style="width:100px;height:30px;">
+ <canvas baseChart class="chart" [datasets]="sparklineChartData2" [labels]="sparklineChartLabels" [options]="sparklineChartOptions" [colors]="sparklineChartPrimary" [legend]="sparklineChartLegend" [chartType]="sparklineChartType" (chartHover)="chartHovered($event)"
+ (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
diff --git a/Angular2_CLI_Full_Project/src/app/widgets/widgets.component.html b/Angular2_CLI_Full_Project/src/app/widgets/widgets.component.html
index 5fa02e8..3279167 100644
--- a/Angular2_CLI_Full_Project/src/app/widgets/widgets.component.html
+++ b/Angular2_CLI_Full_Project/src/app/widgets/widgets.component.html
@@ -16,9 +16,8 @@
<h4 class="m-b-0">9.823</h4>
<p>Members online</p>
</div>
- <div class="chart-wrapper p-x-1">
- <base-chart class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <div class="chart-wrapper p-x-1" style="height:70px;">
+ <canvas baseChart class="chart" [datasets]="lineChart1Data" [labels]="lineChart1Labels" [options]="lineChart1Options" [colors]="lineChart1Colours" [legend]="lineChart1Legend" [chartType]="lineChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -33,8 +32,7 @@
<p>Members online</p>
</div>
<div class="chart-wrapper p-x-1" style="height:70px;">
- <base-chart class="chart" [datasets]="lineChart2Data" [labels]="lineChart2Labels" [options]="lineChart2Options" [colors]="lineChart2Colours" [legend]="lineChart2Legend" [chartType]="lineChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="lineChart2Data" [labels]="lineChart2Labels" [options]="lineChart2Options" [colors]="lineChart2Colours" [legend]="lineChart2Legend" [chartType]="lineChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -56,8 +54,7 @@
<p>Members online</p>
</div>
<div class="chart-wrapper" style="height:70px;">
- <base-chart class="chart" [datasets]="lineChart3Data" [labels]="lineChart3Labels" [options]="lineChart3Options" [colors]="lineChart3Colours" [legend]="lineChart3Legend" [chartType]="lineChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="lineChart3Data" [labels]="lineChart3Labels" [options]="lineChart3Options" [colors]="lineChart3Colours" [legend]="lineChart3Legend" [chartType]="lineChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -79,8 +76,7 @@
<p>Members online</p>
</div>
<div class="chart-wrapper p-x-1" style="height:70px;">
- <base-chart class="chart" [datasets]="barChart1Data" [labels]="barChart1Labels" [options]="barChart1Options" [colors]="barChart1Colours" [legend]="barChart1Legend" [chartType]="barChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:70px;"></base-chart>
+ <canvas baseChart class="chart" [datasets]="barChart1Data" [labels]="barChart1Labels" [options]="barChart1Options" [colors]="barChart1Colours" [legend]="barChart1Legend" [chartType]="barChart1Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -103,13 +99,11 @@
<small>+432,50 (15,78%)</small>
</span>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -129,13 +123,11 @@
<small>+432,50 (15,78%)</small>
</span>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -155,13 +147,11 @@
<small>+432,50 (15,78%)</small>
</span>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -181,13 +171,11 @@
<small>+432,50 (15,78%)</small>
</span>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="lineChart4Data" [labels]="lineChart4Labels" [options]="lineChart4Options" [colors]="lineChart4Colours" [legend]="lineChart4Legend" [chartType]="lineChart4Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:38px;"></base-chart>
+ <div class="chart-wrapper" style="height:38px;">
+ <canvas baseChart class="chart" [datasets]="barChart2Data" [labels]="barChart2Labels" [options]="barChart2Options" [colors]="barChart2Colours" [legend]="barChart2Legend" [chartType]="barChart2Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -293,9 +281,8 @@
<div class="card-block text-xs-center">
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
<div class="h2 p-y-1">1,123</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChart3Data" [labels]="barChart3Labels" [options]="barChart3Options" [colors]="barChart3Primary" [legend]="barChart3Legend" [chartType]="barChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:40px;width:80px;display:inline-block !important;"></base-chart>
+ <div class="chart-wrapper m-x-auto" style="height:40px;width:80px;">
+ <canvas baseChart class="chart" [datasets]="barChart3Data" [labels]="barChart3Labels" [options]="barChart3Options" [colors]="barChart3Primary" [legend]="barChart3Legend" [chartType]="barChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -306,9 +293,8 @@
<div class="card-block text-xs-center">
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
<div class="h2 p-y-1">1,123</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChart3Data" [labels]="barChart3Labels" [options]="barChart3Options" [colors]="barChart3Danger" [legend]="barChart3Legend" [chartType]="barChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:40px;width:80px;display:inline-block !important;"></base-chart>
+ <div class="chart-wrapper m-x-auto" style="height:40px;width:80px;">
+ <canvas baseChart class="chart" [datasets]="barChart3Data" [labels]="barChart3Labels" [options]="barChart3Options" [colors]="barChart3Danger" [legend]="barChart3Legend" [chartType]="barChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -319,9 +305,8 @@
<div class="card-block text-xs-center">
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
<div class="h2 p-y-1">1,123</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="barChart3Data" [labels]="barChart3Labels" [options]="barChart3Options" [colors]="barChart3Success" [legend]="barChart3Legend" [chartType]="barChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:40px;width:80px;display:inline-block !important;"></base-chart>
+ <div class="chart-wrapper m-x-auto" style="height:40px;width:80px;">
+ <canvas baseChart class="chart" [datasets]="barChart3Data" [labels]="barChart3Labels" [options]="barChart3Options" [colors]="barChart3Success" [legend]="barChart3Legend" [chartType]="barChart3Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -332,9 +317,8 @@
<div class="card-block text-xs-center">
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
<div class="h2 p-y-1">1,123</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChart5Data" [labels]="lineChart5Labels" [options]="lineChart5Options" [colors]="lineChart5Info" [legend]="lineChart5Legend" [chartType]="lineChart5Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:40px;width:100px;display:inline-block !important;"></base-chart>
+ <div class="chart-wrapper m-x-auto" style="height:40px;width:80px;">
+ <canvas baseChart class="chart" [datasets]="lineChart5Data" [labels]="lineChart5Labels" [options]="lineChart5Options" [colors]="lineChart5Info" [legend]="lineChart5Legend" [chartType]="lineChart5Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -345,9 +329,8 @@
<div class="card-block text-xs-center">
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
<div class="h2 p-y-1">1,123</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChart5Data" [labels]="lineChart5Labels" [options]="lineChart5Options" [colors]="lineChart5Success" [legend]="lineChart5Legend" [chartType]="lineChart5Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:40px;width:100px;display:inline-block !important;"></base-chart>
+ <div class="chart-wrapper m-x-auto" style="height:40px;width:80px;">
+ <canvas baseChart class="chart" [datasets]="lineChart5Data" [labels]="lineChart5Labels" [options]="lineChart5Options" [colors]="lineChart5Success" [legend]="lineChart5Legend" [chartType]="lineChart5Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -358,9 +341,8 @@
<div class="card-block text-xs-center">
<div class="text-muted small text-uppercase font-weight-bold">Title</div>
<div class="h2 p-y-1">1,123</div>
- <div class="chart-wrapper">
- <base-chart class="chart" [datasets]="lineChart5Data" [labels]="lineChart5Labels" [options]="lineChart5Options" [colors]="lineChart5Warning" [legend]="lineChart5Legend" [chartType]="lineChart5Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"
- style="height:40px;width:100px;display:inline-block !important;"></base-chart>
+ <div class="chart-wrapper m-x-auto" style="height:40px;width:80px;">
+ <canvas baseChart class="chart" [datasets]="lineChart5Data" [labels]="lineChart5Labels" [options]="lineChart5Options" [colors]="lineChart5Warning" [legend]="lineChart5Legend" [chartType]="lineChart5Type" (chartHover)="chartHovered($event)" (chartClick)="chartClicked($event)"></canvas>
</div>
</div>
</div>
@@ -617,7 +599,7 @@
<!--/col-->
</div>
<!--/row-->
- <div class="card-group m-b-1">
+ <div class="card-group">
<div class="card">
<div class="card-block">
<div class="h1 text-muted text-xs-right m-b-2">
diff --git a/Angular2_CLI_Full_Project/src/assets/css/style.css b/Angular2_CLI_Full_Project/src/assets/css/style.css
index 2c21d24..7176ea7 100644
--- a/Angular2_CLI_Full_Project/src/assets/css/style.css
+++ b/Angular2_CLI_Full_Project/src/assets/css/style.css
@@ -1318,21 +1318,21 @@ pre {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
- background-color: rgba(0, 0, 0, 0.05); }
+ background-color: #eceff1; }
.table-hover tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-active,
.table-active > th,
.table-active > td {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-hover .table-active:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-success,
.table-success > th,
@@ -1758,20 +1758,20 @@ fieldset[disabled] a.btn {
.btn-secondary {
color: #263238;
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary:hover {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:focus, .btn-secondary.focus {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad;
+ border-color: #8da1ab;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus,
.open > .btn-secondary.dropdown-toggle:hover,
@@ -1779,13 +1779,13 @@ fieldset[disabled] a.btn {
.open > .btn-secondary.dropdown-toggle.focus {
color: #263238;
background-color: #d4d4d4;
- border-color: #8c8c8c; }
+ border-color: #68818e; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-info {
color: #fff;
@@ -1946,34 +1946,34 @@ fieldset[disabled] a.btn {
border-color: #74cbea; }
.btn-outline-secondary {
- color: #ccc;
+ color: #b0bec5;
background-image: none;
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-outline-secondary:hover {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active, .btn-outline-secondary.active,
.open > .btn-outline-secondary.dropdown-toggle {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active:hover, .btn-outline-secondary:active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary.active:hover, .btn-outline-secondary.active:focus, .btn-outline-secondary.active.focus,
.open > .btn-outline-secondary.dropdown-toggle:hover,
.open > .btn-outline-secondary.dropdown-toggle:focus,
.open > .btn-outline-secondary.dropdown-toggle.focus {
color: #fff;
- background-color: #a1a1a1;
- border-color: #8c8c8c; }
+ background-color: #7e95a0;
+ border-color: #68818e; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-info {
color: #63c2de;
@@ -2951,7 +2951,7 @@ header.navbar .navbar-nav .nav-link {
.card-outline-secondary {
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.card-outline-info {
background-color: transparent;
@@ -3037,7 +3037,7 @@ header.navbar .navbar-nav .nav-link {
width: 100%; } }
.card {
- margin-bottom: 20px; }
+ margin-bottom: 1.5rem; }
.card-header i.icon-bg {
display: inline-block;
@@ -3244,6 +3244,9 @@ header.navbar .navbar-nav .nav-link {
-webkit-column-count: 2;
column-count: 2; } }
+.card-group {
+ margin-bottom: 1.5rem; }
+
.breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -3271,7 +3274,7 @@ header.navbar .navbar-nav .nav-link {
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid #cfd8dc; }
.pagination {
@@ -3446,7 +3449,7 @@ a.tag:focus, a.tag:hover {
margin-bottom: 1rem; }
.progress[value] {
- background-color: #eee;
+ background-color: #eceff1;
border: 0;
appearance: none; }
@@ -3461,15 +3464,15 @@ a.tag:focus, a.tag:hover {
background-color: #0074d9; }
.progress[value]::-webkit-progress-bar {
- background-color: #eee; }
+ background-color: #eceff1; }
base::-moz-progress-bar,
.progress[value] {
- background-color: #eee; }
+ background-color: #eceff1; }
@media screen and (min-width: 0\0) {
.progress {
- background-color: #eee; }
+ background-color: #eceff1; }
.progress-bar {
display: inline-block;
height: 1rem;
@@ -5201,12 +5204,17 @@ nav.top-nav {
color: #263238;
background: #fff;
border-left: 1px solid #cfd8dc; }
- .aside-menu .nav-tabs .nav-link {
- padding: 0.75rem 1rem;
- color: #263238;
- border-top: 0; }
- .aside-menu .nav-tabs .nav-item:first-child .nav-link {
- border-left: 0; }
+ .aside-menu .nav-tabs {
+ border-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-link {
+ padding: 0.75rem 1rem;
+ color: #263238;
+ border-top: 0; }
+ .aside-menu .nav-tabs .nav-link.active {
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-item:first-child .nav-link {
+ border-left: 0; }
.aside-menu .tab-content {
position: relative;
height: calc(100vh - 2.375rem - 55px);
@@ -6449,12 +6457,12 @@ hr.transparent {
.breadcrumb-menu {
position: absolute;
top: 0;
- right: 1rem;
- line-height: 43px; }
+ right: 1rem; }
.breadcrumb-menu:before {
display: none; }
- .breadcrumb-menu .btn-group {
- margin-top: -2px; }
+ .breadcrumb-menu .btn {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem; }
.breadcrumb-menu .btn.btn-secondary {
color: #b0bec5;
border: 0; }
diff --git a/Angular_Full_Project_GULP/css/style.css b/Angular_Full_Project_GULP/css/style.css
index 2c21d24..7176ea7 100644
--- a/Angular_Full_Project_GULP/css/style.css
+++ b/Angular_Full_Project_GULP/css/style.css
@@ -1318,21 +1318,21 @@ pre {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
- background-color: rgba(0, 0, 0, 0.05); }
+ background-color: #eceff1; }
.table-hover tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-active,
.table-active > th,
.table-active > td {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-hover .table-active:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-success,
.table-success > th,
@@ -1758,20 +1758,20 @@ fieldset[disabled] a.btn {
.btn-secondary {
color: #263238;
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary:hover {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:focus, .btn-secondary.focus {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad;
+ border-color: #8da1ab;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus,
.open > .btn-secondary.dropdown-toggle:hover,
@@ -1779,13 +1779,13 @@ fieldset[disabled] a.btn {
.open > .btn-secondary.dropdown-toggle.focus {
color: #263238;
background-color: #d4d4d4;
- border-color: #8c8c8c; }
+ border-color: #68818e; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-info {
color: #fff;
@@ -1946,34 +1946,34 @@ fieldset[disabled] a.btn {
border-color: #74cbea; }
.btn-outline-secondary {
- color: #ccc;
+ color: #b0bec5;
background-image: none;
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-outline-secondary:hover {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active, .btn-outline-secondary.active,
.open > .btn-outline-secondary.dropdown-toggle {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active:hover, .btn-outline-secondary:active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary.active:hover, .btn-outline-secondary.active:focus, .btn-outline-secondary.active.focus,
.open > .btn-outline-secondary.dropdown-toggle:hover,
.open > .btn-outline-secondary.dropdown-toggle:focus,
.open > .btn-outline-secondary.dropdown-toggle.focus {
color: #fff;
- background-color: #a1a1a1;
- border-color: #8c8c8c; }
+ background-color: #7e95a0;
+ border-color: #68818e; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-info {
color: #63c2de;
@@ -2951,7 +2951,7 @@ header.navbar .navbar-nav .nav-link {
.card-outline-secondary {
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.card-outline-info {
background-color: transparent;
@@ -3037,7 +3037,7 @@ header.navbar .navbar-nav .nav-link {
width: 100%; } }
.card {
- margin-bottom: 20px; }
+ margin-bottom: 1.5rem; }
.card-header i.icon-bg {
display: inline-block;
@@ -3244,6 +3244,9 @@ header.navbar .navbar-nav .nav-link {
-webkit-column-count: 2;
column-count: 2; } }
+.card-group {
+ margin-bottom: 1.5rem; }
+
.breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -3271,7 +3274,7 @@ header.navbar .navbar-nav .nav-link {
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid #cfd8dc; }
.pagination {
@@ -3446,7 +3449,7 @@ a.tag:focus, a.tag:hover {
margin-bottom: 1rem; }
.progress[value] {
- background-color: #eee;
+ background-color: #eceff1;
border: 0;
appearance: none; }
@@ -3461,15 +3464,15 @@ a.tag:focus, a.tag:hover {
background-color: #0074d9; }
.progress[value]::-webkit-progress-bar {
- background-color: #eee; }
+ background-color: #eceff1; }
base::-moz-progress-bar,
.progress[value] {
- background-color: #eee; }
+ background-color: #eceff1; }
@media screen and (min-width: 0\0) {
.progress {
- background-color: #eee; }
+ background-color: #eceff1; }
.progress-bar {
display: inline-block;
height: 1rem;
@@ -5201,12 +5204,17 @@ nav.top-nav {
color: #263238;
background: #fff;
border-left: 1px solid #cfd8dc; }
- .aside-menu .nav-tabs .nav-link {
- padding: 0.75rem 1rem;
- color: #263238;
- border-top: 0; }
- .aside-menu .nav-tabs .nav-item:first-child .nav-link {
- border-left: 0; }
+ .aside-menu .nav-tabs {
+ border-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-link {
+ padding: 0.75rem 1rem;
+ color: #263238;
+ border-top: 0; }
+ .aside-menu .nav-tabs .nav-link.active {
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-item:first-child .nav-link {
+ border-left: 0; }
.aside-menu .tab-content {
position: relative;
height: calc(100vh - 2.375rem - 55px);
@@ -6449,12 +6457,12 @@ hr.transparent {
.breadcrumb-menu {
position: absolute;
top: 0;
- right: 1rem;
- line-height: 43px; }
+ right: 1rem; }
.breadcrumb-menu:before {
display: none; }
- .breadcrumb-menu .btn-group {
- margin-top: -2px; }
+ .breadcrumb-menu .btn {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem; }
.breadcrumb-menu .btn.btn-secondary {
color: #b0bec5;
border: 0; }
diff --git a/Angular_Full_Project_GULP/gulpfile.js b/Angular_Full_Project_GULP/gulpfile.js
index 8a2c3d6..4c2f7f6 100644
--- a/Angular_Full_Project_GULP/gulpfile.js
+++ b/Angular_Full_Project_GULP/gulpfile.js
@@ -60,15 +60,10 @@ gulp.task('clean:dist', function () {
});
gulp.task('copy:bower', function () {
- // var f = filter('**/*.js', '!**/*.min.js');
- var f = filter(['**/*.js', '!**/*.min.js'], {restore: true});
-
- return gulp.src(mainBowerFiles())
- .pipe(f)
+ return gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js']))
.pipe(gulp.dest(paths.dist+'/js/libs'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
- // .pipe(f.restore)
.pipe(gulp.dest(paths.dist+'/js/libs'));
});
diff --git a/Angular_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss b/Angular_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
index f81645e..2185ebd 100644
--- a/Angular_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
+++ b/Angular_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5 * $spacer-y;
@include borders($breadcrumb-borders);
}
diff --git a/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss b/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss
index 42c34be..0e24830 100644
--- a/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss
+++ b/Angular_Full_Project_GULP/scss/bootstrap_custom/_card.scss
@@ -1,7 +1,5 @@
.card {
-
- margin-bottom: 20px;
-
+ margin-bottom: 1.5 * $spacer-y;
}
.card-header {
@@ -222,3 +220,7 @@
}
}
}
+
+.card-group {
+ margin-bottom: 1.5 * $spacer-y;
+}
diff --git a/Angular_Full_Project_GULP/scss/core/_aside.scss b/Angular_Full_Project_GULP/scss/core/_aside.scss
index c894be8..123dff1 100644
--- a/Angular_Full_Project_GULP/scss/core/_aside.scss
+++ b/Angular_Full_Project_GULP/scss/core/_aside.scss
@@ -11,10 +11,15 @@
@include borders($aside-menu-borders);
.nav-tabs {
+ border-color: $border-color;
.nav-link {
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
color: $body-color;
border-top: 0;
+ &.active {
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ }
}
.nav-item:first-child {
.nav-link {
diff --git a/Angular_Full_Project_GULP/scss/core/_breadcrumb-menu.scss b/Angular_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
index 0d0fb1b..d1230bc 100644
--- a/Angular_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
+++ b/Angular_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
@@ -2,14 +2,14 @@
position: absolute;
top: 0;
right: $breadcrumb-padding-x;
- line-height: 43px;
&:before {
display: none;
}
- .btn-group {
- margin-top: -2px;
+ .btn {
+ padding-top: $breadcrumb-padding-y;
+ padding-bottom: $breadcrumb-padding-y;
}
.btn.btn-secondary {
diff --git a/Angular_Full_Project_GULP/scss/core/_custom-variables.scss b/Angular_Full_Project_GULP/scss/core/_custom-variables.scss
index 8d444a3..6450db3 100644
--- a/Angular_Full_Project_GULP/scss/core/_custom-variables.scss
+++ b/Angular_Full_Project_GULP/scss/core/_custom-variables.scss
@@ -74,6 +74,7 @@ $sidebar-bg: $gray-dark;
$sidebar-header-bg: rgba(0,0,0,.2);
$sidebar-footer-bg: rgba(0,0,0,.2);
$sidebar-borders: none;
+$mobile-sidebar-width: 200px;
// Sidebar Navigation
diff --git a/Angular_Full_Project_GULP/scss/core/_mobile.scss b/Angular_Full_Project_GULP/scss/core/_mobile.scss
index 04cfe07..be5d659 100644
--- a/Angular_Full_Project_GULP/scss/core/_mobile.scss
+++ b/Angular_Full_Project_GULP/scss/core/_mobile.scss
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
- $mobile-nav-width: 200px;
+ $mobile-sidebar-width: 200px;
body {
padding: 0 !important;
@@ -36,11 +36,11 @@
}
.sidebar {
- width: $mobile-nav-width;
- margin-left: -$mobile-nav-width;
+ width: $mobile-sidebar-width;
+ margin-left: -$mobile-sidebar-width;
.sidebar-footer {
- margin-left: -$mobile-nav-width;
+ margin-left: -$mobile-sidebar-width;
}
}
@@ -77,7 +77,7 @@
}
.main {
- margin-left: $mobile-nav-width !important;
+ margin-left: $mobile-sidebar-width !important;
}
}
}
diff --git a/Angular_Full_Project_GULP/scss/core/bootstrap-variables.scss b/Angular_Full_Project_GULP/scss/core/bootstrap-variables.scss
index fb2400c..4d04caf 100644
--- a/Angular_Full_Project_GULP/scss/core/bootstrap-variables.scss
+++ b/Angular_Full_Project_GULP/scss/core/bootstrap-variables.scss
@@ -84,3 +84,16 @@ $card-cap-bg: $gray-lightest;
$dropdown-padding-y: 0;
$dropdown-border-color: $gray-lighter;
$dropdown-divider-bg: $gray-lightest;
+
+// Buttons
+
+$btn-secondary-border: $gray-light;
+
+// Progress bars
+
+$progress-bg: $gray-lightest;
+
+// Tables
+
+$table-bg-accent: $gray-lightest;
+$table-bg-hover: $gray-lightest;
diff --git a/Angular_Starter_GULP/css/style.css b/Angular_Starter_GULP/css/style.css
index 2c21d24..7176ea7 100644
--- a/Angular_Starter_GULP/css/style.css
+++ b/Angular_Starter_GULP/css/style.css
@@ -1318,21 +1318,21 @@ pre {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
- background-color: rgba(0, 0, 0, 0.05); }
+ background-color: #eceff1; }
.table-hover tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-active,
.table-active > th,
.table-active > td {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-hover .table-active:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-success,
.table-success > th,
@@ -1758,20 +1758,20 @@ fieldset[disabled] a.btn {
.btn-secondary {
color: #263238;
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary:hover {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:focus, .btn-secondary.focus {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad;
+ border-color: #8da1ab;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus,
.open > .btn-secondary.dropdown-toggle:hover,
@@ -1779,13 +1779,13 @@ fieldset[disabled] a.btn {
.open > .btn-secondary.dropdown-toggle.focus {
color: #263238;
background-color: #d4d4d4;
- border-color: #8c8c8c; }
+ border-color: #68818e; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-info {
color: #fff;
@@ -1946,34 +1946,34 @@ fieldset[disabled] a.btn {
border-color: #74cbea; }
.btn-outline-secondary {
- color: #ccc;
+ color: #b0bec5;
background-image: none;
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-outline-secondary:hover {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active, .btn-outline-secondary.active,
.open > .btn-outline-secondary.dropdown-toggle {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active:hover, .btn-outline-secondary:active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary.active:hover, .btn-outline-secondary.active:focus, .btn-outline-secondary.active.focus,
.open > .btn-outline-secondary.dropdown-toggle:hover,
.open > .btn-outline-secondary.dropdown-toggle:focus,
.open > .btn-outline-secondary.dropdown-toggle.focus {
color: #fff;
- background-color: #a1a1a1;
- border-color: #8c8c8c; }
+ background-color: #7e95a0;
+ border-color: #68818e; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-info {
color: #63c2de;
@@ -2951,7 +2951,7 @@ header.navbar .navbar-nav .nav-link {
.card-outline-secondary {
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.card-outline-info {
background-color: transparent;
@@ -3037,7 +3037,7 @@ header.navbar .navbar-nav .nav-link {
width: 100%; } }
.card {
- margin-bottom: 20px; }
+ margin-bottom: 1.5rem; }
.card-header i.icon-bg {
display: inline-block;
@@ -3244,6 +3244,9 @@ header.navbar .navbar-nav .nav-link {
-webkit-column-count: 2;
column-count: 2; } }
+.card-group {
+ margin-bottom: 1.5rem; }
+
.breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -3271,7 +3274,7 @@ header.navbar .navbar-nav .nav-link {
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid #cfd8dc; }
.pagination {
@@ -3446,7 +3449,7 @@ a.tag:focus, a.tag:hover {
margin-bottom: 1rem; }
.progress[value] {
- background-color: #eee;
+ background-color: #eceff1;
border: 0;
appearance: none; }
@@ -3461,15 +3464,15 @@ a.tag:focus, a.tag:hover {
background-color: #0074d9; }
.progress[value]::-webkit-progress-bar {
- background-color: #eee; }
+ background-color: #eceff1; }
base::-moz-progress-bar,
.progress[value] {
- background-color: #eee; }
+ background-color: #eceff1; }
@media screen and (min-width: 0\0) {
.progress {
- background-color: #eee; }
+ background-color: #eceff1; }
.progress-bar {
display: inline-block;
height: 1rem;
@@ -5201,12 +5204,17 @@ nav.top-nav {
color: #263238;
background: #fff;
border-left: 1px solid #cfd8dc; }
- .aside-menu .nav-tabs .nav-link {
- padding: 0.75rem 1rem;
- color: #263238;
- border-top: 0; }
- .aside-menu .nav-tabs .nav-item:first-child .nav-link {
- border-left: 0; }
+ .aside-menu .nav-tabs {
+ border-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-link {
+ padding: 0.75rem 1rem;
+ color: #263238;
+ border-top: 0; }
+ .aside-menu .nav-tabs .nav-link.active {
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-item:first-child .nav-link {
+ border-left: 0; }
.aside-menu .tab-content {
position: relative;
height: calc(100vh - 2.375rem - 55px);
@@ -6449,12 +6457,12 @@ hr.transparent {
.breadcrumb-menu {
position: absolute;
top: 0;
- right: 1rem;
- line-height: 43px; }
+ right: 1rem; }
.breadcrumb-menu:before {
display: none; }
- .breadcrumb-menu .btn-group {
- margin-top: -2px; }
+ .breadcrumb-menu .btn {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem; }
.breadcrumb-menu .btn.btn-secondary {
color: #b0bec5;
border: 0; }
diff --git a/Angular_Starter_GULP/gulpfile.js b/Angular_Starter_GULP/gulpfile.js
index 8a2c3d6..4c2f7f6 100644
--- a/Angular_Starter_GULP/gulpfile.js
+++ b/Angular_Starter_GULP/gulpfile.js
@@ -60,15 +60,10 @@ gulp.task('clean:dist', function () {
});
gulp.task('copy:bower', function () {
- // var f = filter('**/*.js', '!**/*.min.js');
- var f = filter(['**/*.js', '!**/*.min.js'], {restore: true});
-
- return gulp.src(mainBowerFiles())
- .pipe(f)
+ return gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js']))
.pipe(gulp.dest(paths.dist+'/js/libs'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
- // .pipe(f.restore)
.pipe(gulp.dest(paths.dist+'/js/libs'));
});
diff --git a/Angular_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss b/Angular_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
index f81645e..2185ebd 100644
--- a/Angular_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
+++ b/Angular_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5 * $spacer-y;
@include borders($breadcrumb-borders);
}
diff --git a/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss b/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss
index 42c34be..0e24830 100644
--- a/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss
+++ b/Angular_Starter_GULP/scss/bootstrap_custom/_card.scss
@@ -1,7 +1,5 @@
.card {
-
- margin-bottom: 20px;
-
+ margin-bottom: 1.5 * $spacer-y;
}
.card-header {
@@ -222,3 +220,7 @@
}
}
}
+
+.card-group {
+ margin-bottom: 1.5 * $spacer-y;
+}
diff --git a/Angular_Starter_GULP/scss/core/_aside.scss b/Angular_Starter_GULP/scss/core/_aside.scss
index c894be8..123dff1 100644
--- a/Angular_Starter_GULP/scss/core/_aside.scss
+++ b/Angular_Starter_GULP/scss/core/_aside.scss
@@ -11,10 +11,15 @@
@include borders($aside-menu-borders);
.nav-tabs {
+ border-color: $border-color;
.nav-link {
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
color: $body-color;
border-top: 0;
+ &.active {
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ }
}
.nav-item:first-child {
.nav-link {
diff --git a/Angular_Starter_GULP/scss/core/_breadcrumb-menu.scss b/Angular_Starter_GULP/scss/core/_breadcrumb-menu.scss
index 0d0fb1b..d1230bc 100644
--- a/Angular_Starter_GULP/scss/core/_breadcrumb-menu.scss
+++ b/Angular_Starter_GULP/scss/core/_breadcrumb-menu.scss
@@ -2,14 +2,14 @@
position: absolute;
top: 0;
right: $breadcrumb-padding-x;
- line-height: 43px;
&:before {
display: none;
}
- .btn-group {
- margin-top: -2px;
+ .btn {
+ padding-top: $breadcrumb-padding-y;
+ padding-bottom: $breadcrumb-padding-y;
}
.btn.btn-secondary {
diff --git a/Angular_Starter_GULP/scss/core/_custom-variables.scss b/Angular_Starter_GULP/scss/core/_custom-variables.scss
index 8d444a3..6450db3 100644
--- a/Angular_Starter_GULP/scss/core/_custom-variables.scss
+++ b/Angular_Starter_GULP/scss/core/_custom-variables.scss
@@ -74,6 +74,7 @@ $sidebar-bg: $gray-dark;
$sidebar-header-bg: rgba(0,0,0,.2);
$sidebar-footer-bg: rgba(0,0,0,.2);
$sidebar-borders: none;
+$mobile-sidebar-width: 200px;
// Sidebar Navigation
diff --git a/Angular_Starter_GULP/scss/core/_mobile.scss b/Angular_Starter_GULP/scss/core/_mobile.scss
index 04cfe07..be5d659 100644
--- a/Angular_Starter_GULP/scss/core/_mobile.scss
+++ b/Angular_Starter_GULP/scss/core/_mobile.scss
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
- $mobile-nav-width: 200px;
+ $mobile-sidebar-width: 200px;
body {
padding: 0 !important;
@@ -36,11 +36,11 @@
}
.sidebar {
- width: $mobile-nav-width;
- margin-left: -$mobile-nav-width;
+ width: $mobile-sidebar-width;
+ margin-left: -$mobile-sidebar-width;
.sidebar-footer {
- margin-left: -$mobile-nav-width;
+ margin-left: -$mobile-sidebar-width;
}
}
@@ -77,7 +77,7 @@
}
.main {
- margin-left: $mobile-nav-width !important;
+ margin-left: $mobile-sidebar-width !important;
}
}
}
diff --git a/Angular_Starter_GULP/scss/core/bootstrap-variables.scss b/Angular_Starter_GULP/scss/core/bootstrap-variables.scss
index fb2400c..4d04caf 100644
--- a/Angular_Starter_GULP/scss/core/bootstrap-variables.scss
+++ b/Angular_Starter_GULP/scss/core/bootstrap-variables.scss
@@ -84,3 +84,16 @@ $card-cap-bg: $gray-lightest;
$dropdown-padding-y: 0;
$dropdown-border-color: $gray-lighter;
$dropdown-divider-bg: $gray-lightest;
+
+// Buttons
+
+$btn-secondary-border: $gray-light;
+
+// Progress bars
+
+$progress-bg: $gray-lightest;
+
+// Tables
+
+$table-bg-accent: $gray-lightest;
+$table-bg-hover: $gray-lightest;
diff --git a/Static_Full_Project_GULP/css/style.css b/Static_Full_Project_GULP/css/style.css
index 2c21d24..7176ea7 100644
--- a/Static_Full_Project_GULP/css/style.css
+++ b/Static_Full_Project_GULP/css/style.css
@@ -1318,21 +1318,21 @@ pre {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
- background-color: rgba(0, 0, 0, 0.05); }
+ background-color: #eceff1; }
.table-hover tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-active,
.table-active > th,
.table-active > td {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-hover .table-active:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-success,
.table-success > th,
@@ -1758,20 +1758,20 @@ fieldset[disabled] a.btn {
.btn-secondary {
color: #263238;
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary:hover {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:focus, .btn-secondary.focus {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad;
+ border-color: #8da1ab;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus,
.open > .btn-secondary.dropdown-toggle:hover,
@@ -1779,13 +1779,13 @@ fieldset[disabled] a.btn {
.open > .btn-secondary.dropdown-toggle.focus {
color: #263238;
background-color: #d4d4d4;
- border-color: #8c8c8c; }
+ border-color: #68818e; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-info {
color: #fff;
@@ -1946,34 +1946,34 @@ fieldset[disabled] a.btn {
border-color: #74cbea; }
.btn-outline-secondary {
- color: #ccc;
+ color: #b0bec5;
background-image: none;
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-outline-secondary:hover {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active, .btn-outline-secondary.active,
.open > .btn-outline-secondary.dropdown-toggle {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active:hover, .btn-outline-secondary:active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary.active:hover, .btn-outline-secondary.active:focus, .btn-outline-secondary.active.focus,
.open > .btn-outline-secondary.dropdown-toggle:hover,
.open > .btn-outline-secondary.dropdown-toggle:focus,
.open > .btn-outline-secondary.dropdown-toggle.focus {
color: #fff;
- background-color: #a1a1a1;
- border-color: #8c8c8c; }
+ background-color: #7e95a0;
+ border-color: #68818e; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-info {
color: #63c2de;
@@ -2951,7 +2951,7 @@ header.navbar .navbar-nav .nav-link {
.card-outline-secondary {
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.card-outline-info {
background-color: transparent;
@@ -3037,7 +3037,7 @@ header.navbar .navbar-nav .nav-link {
width: 100%; } }
.card {
- margin-bottom: 20px; }
+ margin-bottom: 1.5rem; }
.card-header i.icon-bg {
display: inline-block;
@@ -3244,6 +3244,9 @@ header.navbar .navbar-nav .nav-link {
-webkit-column-count: 2;
column-count: 2; } }
+.card-group {
+ margin-bottom: 1.5rem; }
+
.breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -3271,7 +3274,7 @@ header.navbar .navbar-nav .nav-link {
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid #cfd8dc; }
.pagination {
@@ -3446,7 +3449,7 @@ a.tag:focus, a.tag:hover {
margin-bottom: 1rem; }
.progress[value] {
- background-color: #eee;
+ background-color: #eceff1;
border: 0;
appearance: none; }
@@ -3461,15 +3464,15 @@ a.tag:focus, a.tag:hover {
background-color: #0074d9; }
.progress[value]::-webkit-progress-bar {
- background-color: #eee; }
+ background-color: #eceff1; }
base::-moz-progress-bar,
.progress[value] {
- background-color: #eee; }
+ background-color: #eceff1; }
@media screen and (min-width: 0\0) {
.progress {
- background-color: #eee; }
+ background-color: #eceff1; }
.progress-bar {
display: inline-block;
height: 1rem;
@@ -5201,12 +5204,17 @@ nav.top-nav {
color: #263238;
background: #fff;
border-left: 1px solid #cfd8dc; }
- .aside-menu .nav-tabs .nav-link {
- padding: 0.75rem 1rem;
- color: #263238;
- border-top: 0; }
- .aside-menu .nav-tabs .nav-item:first-child .nav-link {
- border-left: 0; }
+ .aside-menu .nav-tabs {
+ border-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-link {
+ padding: 0.75rem 1rem;
+ color: #263238;
+ border-top: 0; }
+ .aside-menu .nav-tabs .nav-link.active {
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-item:first-child .nav-link {
+ border-left: 0; }
.aside-menu .tab-content {
position: relative;
height: calc(100vh - 2.375rem - 55px);
@@ -6449,12 +6457,12 @@ hr.transparent {
.breadcrumb-menu {
position: absolute;
top: 0;
- right: 1rem;
- line-height: 43px; }
+ right: 1rem; }
.breadcrumb-menu:before {
display: none; }
- .breadcrumb-menu .btn-group {
- margin-top: -2px; }
+ .breadcrumb-menu .btn {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem; }
.breadcrumb-menu .btn.btn-secondary {
color: #b0bec5;
border: 0; }
diff --git a/Static_Full_Project_GULP/gulpfile.js b/Static_Full_Project_GULP/gulpfile.js
index c7abc36..30f1eb3 100644
--- a/Static_Full_Project_GULP/gulpfile.js
+++ b/Static_Full_Project_GULP/gulpfile.js
@@ -60,14 +60,10 @@ gulp.task('clean:dist', function () {
});
gulp.task('copy:bower', function () {
- // var f = filter('**/*.js', '!**/*.min.js');
- var f = filter(['**/*.js', '!**/*.min.js'], {restore: true});
-
- return gulp.src(mainBowerFiles())
- .pipe(f)
+ return gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js']))
+ .pipe(gulp.dest(paths.dist+'/js/libs'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
- // .pipe(f.restore)
.pipe(gulp.dest(paths.dist+'/js/libs'));
});
diff --git a/Static_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss b/Static_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
index f81645e..2185ebd 100644
--- a/Static_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
+++ b/Static_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5 * $spacer-y;
@include borders($breadcrumb-borders);
}
diff --git a/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss b/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss
index 42c34be..0e24830 100644
--- a/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss
+++ b/Static_Full_Project_GULP/scss/bootstrap_custom/_card.scss
@@ -1,7 +1,5 @@
.card {
-
- margin-bottom: 20px;
-
+ margin-bottom: 1.5 * $spacer-y;
}
.card-header {
@@ -222,3 +220,7 @@
}
}
}
+
+.card-group {
+ margin-bottom: 1.5 * $spacer-y;
+}
diff --git a/Static_Full_Project_GULP/scss/core/_aside.scss b/Static_Full_Project_GULP/scss/core/_aside.scss
index c894be8..123dff1 100644
--- a/Static_Full_Project_GULP/scss/core/_aside.scss
+++ b/Static_Full_Project_GULP/scss/core/_aside.scss
@@ -11,10 +11,15 @@
@include borders($aside-menu-borders);
.nav-tabs {
+ border-color: $border-color;
.nav-link {
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
color: $body-color;
border-top: 0;
+ &.active {
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ }
}
.nav-item:first-child {
.nav-link {
diff --git a/Static_Full_Project_GULP/scss/core/_breadcrumb-menu.scss b/Static_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
index 0d0fb1b..d1230bc 100644
--- a/Static_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
+++ b/Static_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
@@ -2,14 +2,14 @@
position: absolute;
top: 0;
right: $breadcrumb-padding-x;
- line-height: 43px;
&:before {
display: none;
}
- .btn-group {
- margin-top: -2px;
+ .btn {
+ padding-top: $breadcrumb-padding-y;
+ padding-bottom: $breadcrumb-padding-y;
}
.btn.btn-secondary {
diff --git a/Static_Full_Project_GULP/scss/core/_custom-variables.scss b/Static_Full_Project_GULP/scss/core/_custom-variables.scss
index 8d444a3..6450db3 100644
--- a/Static_Full_Project_GULP/scss/core/_custom-variables.scss
+++ b/Static_Full_Project_GULP/scss/core/_custom-variables.scss
@@ -74,6 +74,7 @@ $sidebar-bg: $gray-dark;
$sidebar-header-bg: rgba(0,0,0,.2);
$sidebar-footer-bg: rgba(0,0,0,.2);
$sidebar-borders: none;
+$mobile-sidebar-width: 200px;
// Sidebar Navigation
diff --git a/Static_Full_Project_GULP/scss/core/_mobile.scss b/Static_Full_Project_GULP/scss/core/_mobile.scss
index 04cfe07..be5d659 100644
--- a/Static_Full_Project_GULP/scss/core/_mobile.scss
+++ b/Static_Full_Project_GULP/scss/core/_mobile.scss
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
- $mobile-nav-width: 200px;
+ $mobile-sidebar-width: 200px;
body {
padding: 0 !important;
@@ -36,11 +36,11 @@
}
.sidebar {
- width: $mobile-nav-width;
- margin-left: -$mobile-nav-width;
+ width: $mobile-sidebar-width;
+ margin-left: -$mobile-sidebar-width;
.sidebar-footer {
- margin-left: -$mobile-nav-width;
+ margin-left: -$mobile-sidebar-width;
}
}
@@ -77,7 +77,7 @@
}
.main {
- margin-left: $mobile-nav-width !important;
+ margin-left: $mobile-sidebar-width !important;
}
}
}
diff --git a/Static_Full_Project_GULP/scss/core/bootstrap-variables.scss b/Static_Full_Project_GULP/scss/core/bootstrap-variables.scss
index fb2400c..4d04caf 100644
--- a/Static_Full_Project_GULP/scss/core/bootstrap-variables.scss
+++ b/Static_Full_Project_GULP/scss/core/bootstrap-variables.scss
@@ -84,3 +84,16 @@ $card-cap-bg: $gray-lightest;
$dropdown-padding-y: 0;
$dropdown-border-color: $gray-lighter;
$dropdown-divider-bg: $gray-lightest;
+
+// Buttons
+
+$btn-secondary-border: $gray-light;
+
+// Progress bars
+
+$progress-bg: $gray-lightest;
+
+// Tables
+
+$table-bg-accent: $gray-lightest;
+$table-bg-hover: $gray-lightest;
diff --git a/Static_Starter_GULP/css/style.css b/Static_Starter_GULP/css/style.css
index 2c21d24..7176ea7 100644
--- a/Static_Starter_GULP/css/style.css
+++ b/Static_Starter_GULP/css/style.css
@@ -1318,21 +1318,21 @@ pre {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
- background-color: rgba(0, 0, 0, 0.05); }
+ background-color: #eceff1; }
.table-hover tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-active,
.table-active > th,
.table-active > td {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-hover .table-active:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-success,
.table-success > th,
@@ -1758,20 +1758,20 @@ fieldset[disabled] a.btn {
.btn-secondary {
color: #263238;
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary:hover {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:focus, .btn-secondary.focus {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad;
+ border-color: #8da1ab;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus,
.open > .btn-secondary.dropdown-toggle:hover,
@@ -1779,13 +1779,13 @@ fieldset[disabled] a.btn {
.open > .btn-secondary.dropdown-toggle.focus {
color: #263238;
background-color: #d4d4d4;
- border-color: #8c8c8c; }
+ border-color: #68818e; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-info {
color: #fff;
@@ -1946,34 +1946,34 @@ fieldset[disabled] a.btn {
border-color: #74cbea; }
.btn-outline-secondary {
- color: #ccc;
+ color: #b0bec5;
background-image: none;
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-outline-secondary:hover {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active, .btn-outline-secondary.active,
.open > .btn-outline-secondary.dropdown-toggle {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active:hover, .btn-outline-secondary:active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary.active:hover, .btn-outline-secondary.active:focus, .btn-outline-secondary.active.focus,
.open > .btn-outline-secondary.dropdown-toggle:hover,
.open > .btn-outline-secondary.dropdown-toggle:focus,
.open > .btn-outline-secondary.dropdown-toggle.focus {
color: #fff;
- background-color: #a1a1a1;
- border-color: #8c8c8c; }
+ background-color: #7e95a0;
+ border-color: #68818e; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-info {
color: #63c2de;
@@ -2951,7 +2951,7 @@ header.navbar .navbar-nav .nav-link {
.card-outline-secondary {
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.card-outline-info {
background-color: transparent;
@@ -3037,7 +3037,7 @@ header.navbar .navbar-nav .nav-link {
width: 100%; } }
.card {
- margin-bottom: 20px; }
+ margin-bottom: 1.5rem; }
.card-header i.icon-bg {
display: inline-block;
@@ -3244,6 +3244,9 @@ header.navbar .navbar-nav .nav-link {
-webkit-column-count: 2;
column-count: 2; } }
+.card-group {
+ margin-bottom: 1.5rem; }
+
.breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -3271,7 +3274,7 @@ header.navbar .navbar-nav .nav-link {
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid #cfd8dc; }
.pagination {
@@ -3446,7 +3449,7 @@ a.tag:focus, a.tag:hover {
margin-bottom: 1rem; }
.progress[value] {
- background-color: #eee;
+ background-color: #eceff1;
border: 0;
appearance: none; }
@@ -3461,15 +3464,15 @@ a.tag:focus, a.tag:hover {
background-color: #0074d9; }
.progress[value]::-webkit-progress-bar {
- background-color: #eee; }
+ background-color: #eceff1; }
base::-moz-progress-bar,
.progress[value] {
- background-color: #eee; }
+ background-color: #eceff1; }
@media screen and (min-width: 0\0) {
.progress {
- background-color: #eee; }
+ background-color: #eceff1; }
.progress-bar {
display: inline-block;
height: 1rem;
@@ -5201,12 +5204,17 @@ nav.top-nav {
color: #263238;
background: #fff;
border-left: 1px solid #cfd8dc; }
- .aside-menu .nav-tabs .nav-link {
- padding: 0.75rem 1rem;
- color: #263238;
- border-top: 0; }
- .aside-menu .nav-tabs .nav-item:first-child .nav-link {
- border-left: 0; }
+ .aside-menu .nav-tabs {
+ border-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-link {
+ padding: 0.75rem 1rem;
+ color: #263238;
+ border-top: 0; }
+ .aside-menu .nav-tabs .nav-link.active {
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-item:first-child .nav-link {
+ border-left: 0; }
.aside-menu .tab-content {
position: relative;
height: calc(100vh - 2.375rem - 55px);
@@ -6449,12 +6457,12 @@ hr.transparent {
.breadcrumb-menu {
position: absolute;
top: 0;
- right: 1rem;
- line-height: 43px; }
+ right: 1rem; }
.breadcrumb-menu:before {
display: none; }
- .breadcrumb-menu .btn-group {
- margin-top: -2px; }
+ .breadcrumb-menu .btn {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem; }
.breadcrumb-menu .btn.btn-secondary {
color: #b0bec5;
border: 0; }
diff --git a/Static_Starter_GULP/gulpfile.js b/Static_Starter_GULP/gulpfile.js
index c7abc36..30f1eb3 100644
--- a/Static_Starter_GULP/gulpfile.js
+++ b/Static_Starter_GULP/gulpfile.js
@@ -60,14 +60,10 @@ gulp.task('clean:dist', function () {
});
gulp.task('copy:bower', function () {
- // var f = filter('**/*.js', '!**/*.min.js');
- var f = filter(['**/*.js', '!**/*.min.js'], {restore: true});
-
- return gulp.src(mainBowerFiles())
- .pipe(f)
+ return gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js']))
+ .pipe(gulp.dest(paths.dist+'/js/libs'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
- // .pipe(f.restore)
.pipe(gulp.dest(paths.dist+'/js/libs'));
});
diff --git a/Static_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss b/Static_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
index f81645e..2185ebd 100644
--- a/Static_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
+++ b/Static_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5 * $spacer-y;
@include borders($breadcrumb-borders);
}
diff --git a/Static_Starter_GULP/scss/bootstrap_custom/_card.scss b/Static_Starter_GULP/scss/bootstrap_custom/_card.scss
index 42c34be..0e24830 100644
--- a/Static_Starter_GULP/scss/bootstrap_custom/_card.scss
+++ b/Static_Starter_GULP/scss/bootstrap_custom/_card.scss
@@ -1,7 +1,5 @@
.card {
-
- margin-bottom: 20px;
-
+ margin-bottom: 1.5 * $spacer-y;
}
.card-header {
@@ -222,3 +220,7 @@
}
}
}
+
+.card-group {
+ margin-bottom: 1.5 * $spacer-y;
+}
diff --git a/Static_Starter_GULP/scss/core/_aside.scss b/Static_Starter_GULP/scss/core/_aside.scss
index c894be8..123dff1 100644
--- a/Static_Starter_GULP/scss/core/_aside.scss
+++ b/Static_Starter_GULP/scss/core/_aside.scss
@@ -11,10 +11,15 @@
@include borders($aside-menu-borders);
.nav-tabs {
+ border-color: $border-color;
.nav-link {
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
color: $body-color;
border-top: 0;
+ &.active {
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ }
}
.nav-item:first-child {
.nav-link {
diff --git a/Static_Starter_GULP/scss/core/_breadcrumb-menu.scss b/Static_Starter_GULP/scss/core/_breadcrumb-menu.scss
index 0d0fb1b..d1230bc 100644
--- a/Static_Starter_GULP/scss/core/_breadcrumb-menu.scss
+++ b/Static_Starter_GULP/scss/core/_breadcrumb-menu.scss
@@ -2,14 +2,14 @@
position: absolute;
top: 0;
right: $breadcrumb-padding-x;
- line-height: 43px;
&:before {
display: none;
}
- .btn-group {
- margin-top: -2px;
+ .btn {
+ padding-top: $breadcrumb-padding-y;
+ padding-bottom: $breadcrumb-padding-y;
}
.btn.btn-secondary {
diff --git a/Static_Starter_GULP/scss/core/_custom-variables.scss b/Static_Starter_GULP/scss/core/_custom-variables.scss
index 8d444a3..6450db3 100644
--- a/Static_Starter_GULP/scss/core/_custom-variables.scss
+++ b/Static_Starter_GULP/scss/core/_custom-variables.scss
@@ -74,6 +74,7 @@ $sidebar-bg: $gray-dark;
$sidebar-header-bg: rgba(0,0,0,.2);
$sidebar-footer-bg: rgba(0,0,0,.2);
$sidebar-borders: none;
+$mobile-sidebar-width: 200px;
// Sidebar Navigation
diff --git a/Static_Starter_GULP/scss/core/_mobile.scss b/Static_Starter_GULP/scss/core/_mobile.scss
index 04cfe07..be5d659 100644
--- a/Static_Starter_GULP/scss/core/_mobile.scss
+++ b/Static_Starter_GULP/scss/core/_mobile.scss
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
- $mobile-nav-width: 200px;
+ $mobile-sidebar-width: 200px;
body {
padding: 0 !important;
@@ -36,11 +36,11 @@
}
.sidebar {
- width: $mobile-nav-width;
- margin-left: -$mobile-nav-width;
+ width: $mobile-sidebar-width;
+ margin-left: -$mobile-sidebar-width;
.sidebar-footer {
- margin-left: -$mobile-nav-width;
+ margin-left: -$mobile-sidebar-width;
}
}
@@ -77,7 +77,7 @@
}
.main {
- margin-left: $mobile-nav-width !important;
+ margin-left: $mobile-sidebar-width !important;
}
}
}
diff --git a/Static_Starter_GULP/scss/core/bootstrap-variables.scss b/Static_Starter_GULP/scss/core/bootstrap-variables.scss
index fb2400c..4d04caf 100644
--- a/Static_Starter_GULP/scss/core/bootstrap-variables.scss
+++ b/Static_Starter_GULP/scss/core/bootstrap-variables.scss
@@ -84,3 +84,16 @@ $card-cap-bg: $gray-lightest;
$dropdown-padding-y: 0;
$dropdown-border-color: $gray-lighter;
$dropdown-divider-bg: $gray-lightest;
+
+// Buttons
+
+$btn-secondary-border: $gray-light;
+
+// Progress bars
+
+$progress-bg: $gray-lightest;
+
+// Tables
+
+$table-bg-accent: $gray-lightest;
+$table-bg-hover: $gray-lightest;
diff --git a/jQuery_Full_Project_GULP/css/style.css b/jQuery_Full_Project_GULP/css/style.css
index 2c21d24..7176ea7 100644
--- a/jQuery_Full_Project_GULP/css/style.css
+++ b/jQuery_Full_Project_GULP/css/style.css
@@ -1318,21 +1318,21 @@ pre {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
- background-color: rgba(0, 0, 0, 0.05); }
+ background-color: #eceff1; }
.table-hover tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-active,
.table-active > th,
.table-active > td {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-hover .table-active:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-success,
.table-success > th,
@@ -1758,20 +1758,20 @@ fieldset[disabled] a.btn {
.btn-secondary {
color: #263238;
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary:hover {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:focus, .btn-secondary.focus {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad;
+ border-color: #8da1ab;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus,
.open > .btn-secondary.dropdown-toggle:hover,
@@ -1779,13 +1779,13 @@ fieldset[disabled] a.btn {
.open > .btn-secondary.dropdown-toggle.focus {
color: #263238;
background-color: #d4d4d4;
- border-color: #8c8c8c; }
+ border-color: #68818e; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-info {
color: #fff;
@@ -1946,34 +1946,34 @@ fieldset[disabled] a.btn {
border-color: #74cbea; }
.btn-outline-secondary {
- color: #ccc;
+ color: #b0bec5;
background-image: none;
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-outline-secondary:hover {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active, .btn-outline-secondary.active,
.open > .btn-outline-secondary.dropdown-toggle {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active:hover, .btn-outline-secondary:active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary.active:hover, .btn-outline-secondary.active:focus, .btn-outline-secondary.active.focus,
.open > .btn-outline-secondary.dropdown-toggle:hover,
.open > .btn-outline-secondary.dropdown-toggle:focus,
.open > .btn-outline-secondary.dropdown-toggle.focus {
color: #fff;
- background-color: #a1a1a1;
- border-color: #8c8c8c; }
+ background-color: #7e95a0;
+ border-color: #68818e; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-info {
color: #63c2de;
@@ -2951,7 +2951,7 @@ header.navbar .navbar-nav .nav-link {
.card-outline-secondary {
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.card-outline-info {
background-color: transparent;
@@ -3037,7 +3037,7 @@ header.navbar .navbar-nav .nav-link {
width: 100%; } }
.card {
- margin-bottom: 20px; }
+ margin-bottom: 1.5rem; }
.card-header i.icon-bg {
display: inline-block;
@@ -3244,6 +3244,9 @@ header.navbar .navbar-nav .nav-link {
-webkit-column-count: 2;
column-count: 2; } }
+.card-group {
+ margin-bottom: 1.5rem; }
+
.breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -3271,7 +3274,7 @@ header.navbar .navbar-nav .nav-link {
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid #cfd8dc; }
.pagination {
@@ -3446,7 +3449,7 @@ a.tag:focus, a.tag:hover {
margin-bottom: 1rem; }
.progress[value] {
- background-color: #eee;
+ background-color: #eceff1;
border: 0;
appearance: none; }
@@ -3461,15 +3464,15 @@ a.tag:focus, a.tag:hover {
background-color: #0074d9; }
.progress[value]::-webkit-progress-bar {
- background-color: #eee; }
+ background-color: #eceff1; }
base::-moz-progress-bar,
.progress[value] {
- background-color: #eee; }
+ background-color: #eceff1; }
@media screen and (min-width: 0\0) {
.progress {
- background-color: #eee; }
+ background-color: #eceff1; }
.progress-bar {
display: inline-block;
height: 1rem;
@@ -5201,12 +5204,17 @@ nav.top-nav {
color: #263238;
background: #fff;
border-left: 1px solid #cfd8dc; }
- .aside-menu .nav-tabs .nav-link {
- padding: 0.75rem 1rem;
- color: #263238;
- border-top: 0; }
- .aside-menu .nav-tabs .nav-item:first-child .nav-link {
- border-left: 0; }
+ .aside-menu .nav-tabs {
+ border-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-link {
+ padding: 0.75rem 1rem;
+ color: #263238;
+ border-top: 0; }
+ .aside-menu .nav-tabs .nav-link.active {
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-item:first-child .nav-link {
+ border-left: 0; }
.aside-menu .tab-content {
position: relative;
height: calc(100vh - 2.375rem - 55px);
@@ -6449,12 +6457,12 @@ hr.transparent {
.breadcrumb-menu {
position: absolute;
top: 0;
- right: 1rem;
- line-height: 43px; }
+ right: 1rem; }
.breadcrumb-menu:before {
display: none; }
- .breadcrumb-menu .btn-group {
- margin-top: -2px; }
+ .breadcrumb-menu .btn {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem; }
.breadcrumb-menu .btn.btn-secondary {
color: #b0bec5;
border: 0; }
diff --git a/jQuery_Full_Project_GULP/gulpfile.js b/jQuery_Full_Project_GULP/gulpfile.js
index c55ed20..4c2f7f6 100644
--- a/jQuery_Full_Project_GULP/gulpfile.js
+++ b/jQuery_Full_Project_GULP/gulpfile.js
@@ -60,14 +60,10 @@ gulp.task('clean:dist', function () {
});
gulp.task('copy:bower', function () {
- // var f = filter('**/*.js', '!**/*.min.js');
- var f = filter(['**/*.js', '!**/*.min.js'], {restore: true});
-
- return gulp.src(mainBowerFiles())
- .pipe(f)
+ return gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js']))
+ .pipe(gulp.dest(paths.dist+'/js/libs'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
- // .pipe(f.restore)
.pipe(gulp.dest(paths.dist+'/js/libs'));
});
diff --git a/jQuery_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss b/jQuery_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
index f81645e..2185ebd 100644
--- a/jQuery_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
+++ b/jQuery_Full_Project_GULP/scss/bootstrap_custom/_breadcrumb.scss
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5 * $spacer-y;
@include borders($breadcrumb-borders);
}
diff --git a/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss b/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss
index 42c34be..0e24830 100644
--- a/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss
+++ b/jQuery_Full_Project_GULP/scss/bootstrap_custom/_card.scss
@@ -1,7 +1,5 @@
.card {
-
- margin-bottom: 20px;
-
+ margin-bottom: 1.5 * $spacer-y;
}
.card-header {
@@ -222,3 +220,7 @@
}
}
}
+
+.card-group {
+ margin-bottom: 1.5 * $spacer-y;
+}
diff --git a/jQuery_Full_Project_GULP/scss/core/_aside.scss b/jQuery_Full_Project_GULP/scss/core/_aside.scss
index c894be8..123dff1 100644
--- a/jQuery_Full_Project_GULP/scss/core/_aside.scss
+++ b/jQuery_Full_Project_GULP/scss/core/_aside.scss
@@ -11,10 +11,15 @@
@include borders($aside-menu-borders);
.nav-tabs {
+ border-color: $border-color;
.nav-link {
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
color: $body-color;
border-top: 0;
+ &.active {
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ }
}
.nav-item:first-child {
.nav-link {
diff --git a/jQuery_Full_Project_GULP/scss/core/_breadcrumb-menu.scss b/jQuery_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
index 0d0fb1b..d1230bc 100644
--- a/jQuery_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
+++ b/jQuery_Full_Project_GULP/scss/core/_breadcrumb-menu.scss
@@ -2,14 +2,14 @@
position: absolute;
top: 0;
right: $breadcrumb-padding-x;
- line-height: 43px;
&:before {
display: none;
}
- .btn-group {
- margin-top: -2px;
+ .btn {
+ padding-top: $breadcrumb-padding-y;
+ padding-bottom: $breadcrumb-padding-y;
}
.btn.btn-secondary {
diff --git a/jQuery_Full_Project_GULP/scss/core/_custom-variables.scss b/jQuery_Full_Project_GULP/scss/core/_custom-variables.scss
index 8d444a3..6450db3 100644
--- a/jQuery_Full_Project_GULP/scss/core/_custom-variables.scss
+++ b/jQuery_Full_Project_GULP/scss/core/_custom-variables.scss
@@ -74,6 +74,7 @@ $sidebar-bg: $gray-dark;
$sidebar-header-bg: rgba(0,0,0,.2);
$sidebar-footer-bg: rgba(0,0,0,.2);
$sidebar-borders: none;
+$mobile-sidebar-width: 200px;
// Sidebar Navigation
diff --git a/jQuery_Full_Project_GULP/scss/core/_mobile.scss b/jQuery_Full_Project_GULP/scss/core/_mobile.scss
index 04cfe07..be5d659 100644
--- a/jQuery_Full_Project_GULP/scss/core/_mobile.scss
+++ b/jQuery_Full_Project_GULP/scss/core/_mobile.scss
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
- $mobile-nav-width: 200px;
+ $mobile-sidebar-width: 200px;
body {
padding: 0 !important;
@@ -36,11 +36,11 @@
}
.sidebar {
- width: $mobile-nav-width;
- margin-left: -$mobile-nav-width;
+ width: $mobile-sidebar-width;
+ margin-left: -$mobile-sidebar-width;
.sidebar-footer {
- margin-left: -$mobile-nav-width;
+ margin-left: -$mobile-sidebar-width;
}
}
@@ -77,7 +77,7 @@
}
.main {
- margin-left: $mobile-nav-width !important;
+ margin-left: $mobile-sidebar-width !important;
}
}
}
diff --git a/jQuery_Full_Project_GULP/scss/core/bootstrap-variables.scss b/jQuery_Full_Project_GULP/scss/core/bootstrap-variables.scss
index fb2400c..4d04caf 100644
--- a/jQuery_Full_Project_GULP/scss/core/bootstrap-variables.scss
+++ b/jQuery_Full_Project_GULP/scss/core/bootstrap-variables.scss
@@ -84,3 +84,16 @@ $card-cap-bg: $gray-lightest;
$dropdown-padding-y: 0;
$dropdown-border-color: $gray-lighter;
$dropdown-divider-bg: $gray-lightest;
+
+// Buttons
+
+$btn-secondary-border: $gray-light;
+
+// Progress bars
+
+$progress-bg: $gray-lightest;
+
+// Tables
+
+$table-bg-accent: $gray-lightest;
+$table-bg-hover: $gray-lightest;
diff --git a/jQuery_Starter_GULP/css/style.css b/jQuery_Starter_GULP/css/style.css
index 2c21d24..7176ea7 100644
--- a/jQuery_Starter_GULP/css/style.css
+++ b/jQuery_Starter_GULP/css/style.css
@@ -1318,21 +1318,21 @@ pre {
border-bottom-width: 2px; }
.table-striped tbody tr:nth-of-type(odd) {
- background-color: rgba(0, 0, 0, 0.05); }
+ background-color: #eceff1; }
.table-hover tbody tr:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-active,
.table-active > th,
.table-active > td {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #eceff1; }
.table-hover .table-active:hover {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-hover .table-active:hover > td,
.table-hover .table-active:hover > th {
- background-color: rgba(0, 0, 0, 0.075); }
+ background-color: #dde3e6; }
.table-success,
.table-success > th,
@@ -1758,20 +1758,20 @@ fieldset[disabled] a.btn {
.btn-secondary {
color: #263238;
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary:hover {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:focus, .btn-secondary.focus {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad; }
+ border-color: #8da1ab; }
.btn-secondary:active, .btn-secondary.active,
.open > .btn-secondary.dropdown-toggle {
color: #263238;
background-color: #e6e6e6;
- border-color: #adadad;
+ border-color: #8da1ab;
background-image: none; }
.btn-secondary:active:hover, .btn-secondary:active:focus, .btn-secondary:active.focus, .btn-secondary.active:hover, .btn-secondary.active:focus, .btn-secondary.active.focus,
.open > .btn-secondary.dropdown-toggle:hover,
@@ -1779,13 +1779,13 @@ fieldset[disabled] a.btn {
.open > .btn-secondary.dropdown-toggle.focus {
color: #263238;
background-color: #d4d4d4;
- border-color: #8c8c8c; }
+ border-color: #68818e; }
.btn-secondary.disabled:focus, .btn-secondary.disabled.focus, .btn-secondary:disabled:focus, .btn-secondary:disabled.focus {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
background-color: #fff;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-info {
color: #fff;
@@ -1946,34 +1946,34 @@ fieldset[disabled] a.btn {
border-color: #74cbea; }
.btn-outline-secondary {
- color: #ccc;
+ color: #b0bec5;
background-image: none;
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.btn-outline-secondary:hover {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:focus, .btn-outline-secondary.focus {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active, .btn-outline-secondary.active,
.open > .btn-outline-secondary.dropdown-toggle {
color: #fff;
- background-color: #ccc;
- border-color: #ccc; }
+ background-color: #b0bec5;
+ border-color: #b0bec5; }
.btn-outline-secondary:active:hover, .btn-outline-secondary:active:focus, .btn-outline-secondary:active.focus, .btn-outline-secondary.active:hover, .btn-outline-secondary.active:focus, .btn-outline-secondary.active.focus,
.open > .btn-outline-secondary.dropdown-toggle:hover,
.open > .btn-outline-secondary.dropdown-toggle:focus,
.open > .btn-outline-secondary.dropdown-toggle.focus {
color: #fff;
- background-color: #a1a1a1;
- border-color: #8c8c8c; }
+ background-color: #7e95a0;
+ border-color: #68818e; }
.btn-outline-secondary.disabled:focus, .btn-outline-secondary.disabled.focus, .btn-outline-secondary:disabled:focus, .btn-outline-secondary:disabled.focus {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-secondary.disabled:hover, .btn-outline-secondary:disabled:hover {
- border-color: white; }
+ border-color: #ebeef0; }
.btn-outline-info {
color: #63c2de;
@@ -2951,7 +2951,7 @@ header.navbar .navbar-nav .nav-link {
.card-outline-secondary {
background-color: transparent;
- border-color: #ccc; }
+ border-color: #b0bec5; }
.card-outline-info {
background-color: transparent;
@@ -3037,7 +3037,7 @@ header.navbar .navbar-nav .nav-link {
width: 100%; } }
.card {
- margin-bottom: 20px; }
+ margin-bottom: 1.5rem; }
.card-header i.icon-bg {
display: inline-block;
@@ -3244,6 +3244,9 @@ header.navbar .navbar-nav .nav-link {
-webkit-column-count: 2;
column-count: 2; } }
+.card-group {
+ margin-bottom: 1.5rem; }
+
.breadcrumb {
padding: 0.75rem 1rem;
margin-bottom: 1rem;
@@ -3271,7 +3274,7 @@ header.navbar .navbar-nav .nav-link {
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5rem;
border-bottom: 1px solid #cfd8dc; }
.pagination {
@@ -3446,7 +3449,7 @@ a.tag:focus, a.tag:hover {
margin-bottom: 1rem; }
.progress[value] {
- background-color: #eee;
+ background-color: #eceff1;
border: 0;
appearance: none; }
@@ -3461,15 +3464,15 @@ a.tag:focus, a.tag:hover {
background-color: #0074d9; }
.progress[value]::-webkit-progress-bar {
- background-color: #eee; }
+ background-color: #eceff1; }
base::-moz-progress-bar,
.progress[value] {
- background-color: #eee; }
+ background-color: #eceff1; }
@media screen and (min-width: 0\0) {
.progress {
- background-color: #eee; }
+ background-color: #eceff1; }
.progress-bar {
display: inline-block;
height: 1rem;
@@ -5201,12 +5204,17 @@ nav.top-nav {
color: #263238;
background: #fff;
border-left: 1px solid #cfd8dc; }
- .aside-menu .nav-tabs .nav-link {
- padding: 0.75rem 1rem;
- color: #263238;
- border-top: 0; }
- .aside-menu .nav-tabs .nav-item:first-child .nav-link {
- border-left: 0; }
+ .aside-menu .nav-tabs {
+ border-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-link {
+ padding: 0.75rem 1rem;
+ color: #263238;
+ border-top: 0; }
+ .aside-menu .nav-tabs .nav-link.active {
+ border-left-color: #cfd8dc;
+ border-right-color: #cfd8dc; }
+ .aside-menu .nav-tabs .nav-item:first-child .nav-link {
+ border-left: 0; }
.aside-menu .tab-content {
position: relative;
height: calc(100vh - 2.375rem - 55px);
@@ -6449,12 +6457,12 @@ hr.transparent {
.breadcrumb-menu {
position: absolute;
top: 0;
- right: 1rem;
- line-height: 43px; }
+ right: 1rem; }
.breadcrumb-menu:before {
display: none; }
- .breadcrumb-menu .btn-group {
- margin-top: -2px; }
+ .breadcrumb-menu .btn {
+ padding-top: 0.75rem;
+ padding-bottom: 0.75rem; }
.breadcrumb-menu .btn.btn-secondary {
color: #b0bec5;
border: 0; }
diff --git a/jQuery_Starter_GULP/gulpfile.js b/jQuery_Starter_GULP/gulpfile.js
index c55ed20..4c2f7f6 100644
--- a/jQuery_Starter_GULP/gulpfile.js
+++ b/jQuery_Starter_GULP/gulpfile.js
@@ -60,14 +60,10 @@ gulp.task('clean:dist', function () {
});
gulp.task('copy:bower', function () {
- // var f = filter('**/*.js', '!**/*.min.js');
- var f = filter(['**/*.js', '!**/*.min.js'], {restore: true});
-
- return gulp.src(mainBowerFiles())
- .pipe(f)
+ return gulp.src(mainBowerFiles(['**/*.js', '!**/*.min.js']))
+ .pipe(gulp.dest(paths.dist+'/js/libs'))
.pipe(uglify())
.pipe(rename({ suffix: '.min' }))
- // .pipe(f.restore)
.pipe(gulp.dest(paths.dist+'/js/libs'));
});
diff --git a/jQuery_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss b/jQuery_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
index f81645e..2185ebd 100644
--- a/jQuery_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
+++ b/jQuery_Starter_GULP/scss/bootstrap_custom/_breadcrumb.scss
@@ -1,6 +1,6 @@
.breadcrumb {
position: relative;
- margin-bottom: 20px;
+ margin-bottom: 1.5 * $spacer-y;
@include borders($breadcrumb-borders);
}
diff --git a/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss b/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss
index 42c34be..0e24830 100644
--- a/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss
+++ b/jQuery_Starter_GULP/scss/bootstrap_custom/_card.scss
@@ -1,7 +1,5 @@
.card {
-
- margin-bottom: 20px;
-
+ margin-bottom: 1.5 * $spacer-y;
}
.card-header {
@@ -222,3 +220,7 @@
}
}
}
+
+.card-group {
+ margin-bottom: 1.5 * $spacer-y;
+}
diff --git a/jQuery_Starter_GULP/scss/core/_aside.scss b/jQuery_Starter_GULP/scss/core/_aside.scss
index c894be8..123dff1 100644
--- a/jQuery_Starter_GULP/scss/core/_aside.scss
+++ b/jQuery_Starter_GULP/scss/core/_aside.scss
@@ -11,10 +11,15 @@
@include borders($aside-menu-borders);
.nav-tabs {
+ border-color: $border-color;
.nav-link {
padding: $aside-menu-nav-padding-y $aside-menu-nav-padding-x;
color: $body-color;
border-top: 0;
+ &.active {
+ border-left-color: $border-color;
+ border-right-color: $border-color;
+ }
}
.nav-item:first-child {
.nav-link {
diff --git a/jQuery_Starter_GULP/scss/core/_breadcrumb-menu.scss b/jQuery_Starter_GULP/scss/core/_breadcrumb-menu.scss
index 0d0fb1b..d1230bc 100644
--- a/jQuery_Starter_GULP/scss/core/_breadcrumb-menu.scss
+++ b/jQuery_Starter_GULP/scss/core/_breadcrumb-menu.scss
@@ -2,14 +2,14 @@
position: absolute;
top: 0;
right: $breadcrumb-padding-x;
- line-height: 43px;
&:before {
display: none;
}
- .btn-group {
- margin-top: -2px;
+ .btn {
+ padding-top: $breadcrumb-padding-y;
+ padding-bottom: $breadcrumb-padding-y;
}
.btn.btn-secondary {
diff --git a/jQuery_Starter_GULP/scss/core/_custom-variables.scss b/jQuery_Starter_GULP/scss/core/_custom-variables.scss
index 8d444a3..6450db3 100644
--- a/jQuery_Starter_GULP/scss/core/_custom-variables.scss
+++ b/jQuery_Starter_GULP/scss/core/_custom-variables.scss
@@ -74,6 +74,7 @@ $sidebar-bg: $gray-dark;
$sidebar-header-bg: rgba(0,0,0,.2);
$sidebar-footer-bg: rgba(0,0,0,.2);
$sidebar-borders: none;
+$mobile-sidebar-width: 200px;
// Sidebar Navigation
diff --git a/jQuery_Starter_GULP/scss/core/_mobile.scss b/jQuery_Starter_GULP/scss/core/_mobile.scss
index 04cfe07..be5d659 100644
--- a/jQuery_Starter_GULP/scss/core/_mobile.scss
+++ b/jQuery_Starter_GULP/scss/core/_mobile.scss
@@ -1,6 +1,6 @@
@include media-breakpoint-down(md) {
- $mobile-nav-width: 200px;
+ $mobile-sidebar-width: 200px;
body {
padding: 0 !important;
@@ -36,11 +36,11 @@
}
.sidebar {
- width: $mobile-nav-width;
- margin-left: -$mobile-nav-width;
+ width: $mobile-sidebar-width;
+ margin-left: -$mobile-sidebar-width;
.sidebar-footer {
- margin-left: -$mobile-nav-width;
+ margin-left: -$mobile-sidebar-width;
}
}
@@ -77,7 +77,7 @@
}
.main {
- margin-left: $mobile-nav-width !important;
+ margin-left: $mobile-sidebar-width !important;
}
}
}
diff --git a/jQuery_Starter_GULP/scss/core/bootstrap-variables.scss b/jQuery_Starter_GULP/scss/core/bootstrap-variables.scss
index fb2400c..4d04caf 100644
--- a/jQuery_Starter_GULP/scss/core/bootstrap-variables.scss
+++ b/jQuery_Starter_GULP/scss/core/bootstrap-variables.scss
@@ -84,3 +84,16 @@ $card-cap-bg: $gray-lightest;
$dropdown-padding-y: 0;
$dropdown-border-color: $gray-lighter;
$dropdown-divider-bg: $gray-lightest;
+
+// Buttons
+
+$btn-secondary-border: $gray-light;
+
+// Progress bars
+
+$progress-bg: $gray-lightest;
+
+// Tables
+
+$table-bg-accent: $gray-lightest;
+$table-bg-hover: $gray-lightest;
--
GitLab