From 923dc4ac3ca737f2e4cf9752b751e6387b21b60c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Sun, 22 Oct 2017 19:22:38 +0200 Subject: [PATCH 1/7] - update: Bootstrap version to v4.0.0-beta.2 - update: vue-chartjs version to 3.0.0 - refactor: Remove old SCSS variables - refactor: Breadcrumb Menu styles - fix: External links issue - fix: Mobile sidebar-nav height issue --- Vue_Full_Project/CHANGELOG.md | 7 +- Vue_Full_Project/package.json | 21 +- .../scss/_bootstrap-variables.scss | 1 + Vue_Full_Project/scss/bootstrap/_alert.scss | 7 +- Vue_Full_Project/scss/bootstrap/_badge.scss | 3 +- .../scss/bootstrap/_breadcrumb.scss | 8 +- .../scss/bootstrap/_button-group.scss | 57 +- Vue_Full_Project/scss/bootstrap/_buttons.scss | 53 +- Vue_Full_Project/scss/bootstrap/_card.scss | 80 +- .../scss/bootstrap/_carousel.scss | 6 + Vue_Full_Project/scss/bootstrap/_close.scss | 4 +- .../scss/bootstrap/_custom-forms.scss | 19 +- .../scss/bootstrap/_dropdown.scss | 57 +- Vue_Full_Project/scss/bootstrap/_forms.scss | 56 +- .../scss/bootstrap/_functions.scss | 16 +- Vue_Full_Project/scss/bootstrap/_grid.scss | 1 - .../scss/bootstrap/_input-group.scss | 24 +- Vue_Full_Project/scss/bootstrap/_mixins.scss | 1 + Vue_Full_Project/scss/bootstrap/_modal.scss | 13 +- Vue_Full_Project/scss/bootstrap/_nav.scss | 10 +- Vue_Full_Project/scss/bootstrap/_navbar.scss | 32 +- .../scss/bootstrap/_pagination.scss | 6 +- Vue_Full_Project/scss/bootstrap/_popover.scss | 33 +- Vue_Full_Project/scss/bootstrap/_print.scss | 5 +- .../scss/bootstrap/_progress.scss | 10 +- Vue_Full_Project/scss/bootstrap/_reboot.scss | 55 +- Vue_Full_Project/scss/bootstrap/_root.scss | 19 + Vue_Full_Project/scss/bootstrap/_tables.scss | 68 +- Vue_Full_Project/scss/bootstrap/_tooltip.scss | 12 +- .../scss/bootstrap/_transitions.scss | 2 + Vue_Full_Project/scss/bootstrap/_type.scss | 2 + .../scss/bootstrap/_variables.scss | 943 +++++++++--------- .../scss/bootstrap/bootstrap-grid.scss | 16 +- .../scss/bootstrap/bootstrap-reboot.scss | 11 +- .../scss/bootstrap/bootstrap.scss | 3 +- .../scss/bootstrap/mixins/_alert.scss | 2 +- .../bootstrap/mixins/_background-variant.scss | 8 + .../scss/bootstrap/mixins/_badge.scss | 4 +- .../scss/bootstrap/mixins/_breakpoints.scss | 22 +- .../scss/bootstrap/mixins/_buttons.scss | 43 +- .../scss/bootstrap/mixins/_caret.scss | 35 + .../scss/bootstrap/mixins/_float.scss | 2 + .../scss/bootstrap/mixins/_forms.scss | 35 +- .../scss/bootstrap/mixins/_gradients.scss | 8 + .../bootstrap/mixins/_grid-framework.scss | 15 +- .../scss/bootstrap/mixins/_grid.scss | 15 +- .../scss/bootstrap/mixins/_hover.scss | 25 +- .../scss/bootstrap/mixins/_image.scss | 6 +- .../scss/bootstrap/mixins/_list-group.scss | 2 - .../scss/bootstrap/mixins/_navbar-align.scss | 3 +- .../scss/bootstrap/mixins/_reset-text.scss | 3 +- .../scss/bootstrap/mixins/_screen-reader.scss | 4 +- .../scss/bootstrap/mixins/_text-emphasis.scss | 2 + .../scss/bootstrap/mixins/_visibility.scss | 2 + .../scss/bootstrap/utilities/_align.scss | 2 + .../scss/bootstrap/utilities/_background.scss | 19 +- .../scss/bootstrap/utilities/_borders.scss | 8 +- .../scss/bootstrap/utilities/_display.scss | 3 + .../scss/bootstrap/utilities/_flex.scss | 2 + .../scss/bootstrap/utilities/_position.scss | 13 +- .../scss/bootstrap/utilities/_sizing.scss | 2 + .../scss/bootstrap/utilities/_spacing.scss | 38 +- .../scss/bootstrap/utilities/_text.scss | 11 +- .../scss/core/_breadcrumb-menu.scss | 12 +- Vue_Full_Project/scss/core/_breadcrumb.scss | 2 - Vue_Full_Project/scss/core/_layout.scss | 2 +- Vue_Full_Project/scss/core/_variables.scss | 2 - Vue_Full_Project/scss/style.scss | 2 +- .../src/components/HeaderDropdown.vue | 19 +- .../src/components/SidebarNavLink.vue | 12 +- Vue_Full_Project/src/views/Dashboard.vue | 8 +- Vue_Full_Project/src/views/Widgets.vue | 2 +- .../src/views/charts/BarExample.vue | 5 +- .../src/views/charts/DoughnutExample.vue | 5 +- .../src/views/charts/LineExample.vue | 5 +- .../src/views/charts/PieExample.vue | 5 +- .../src/views/charts/PolarAreaExample.vue | 5 +- .../src/views/charts/RadarExample.vue | 5 +- .../src/views/components/Buttons.vue | 57 +- .../src/views/components/Forms.vue | 4 +- .../views/dashboard/CalloutChartExample.vue | 5 +- .../views/dashboard/CardBarChartExample.vue | 5 +- .../views/dashboard/CardLine1ChartExample.vue | 5 +- .../views/dashboard/CardLine2ChartExample.vue | 5 +- .../views/dashboard/CardLine3ChartExample.vue | 5 +- .../src/views/dashboard/MainChartExample.vue | 5 +- .../views/dashboard/SocialBoxChartExample.vue | 5 +- Vue_Full_Project/src/views/pages/Login.vue | 2 +- Vue_Starter/package.json | 61 +- Vue_Starter/scss/_bootstrap-variables.scss | 1 + Vue_Starter/scss/bootstrap/_alert.scss | 7 +- Vue_Starter/scss/bootstrap/_badge.scss | 3 +- Vue_Starter/scss/bootstrap/_breadcrumb.scss | 8 +- Vue_Starter/scss/bootstrap/_button-group.scss | 57 +- Vue_Starter/scss/bootstrap/_buttons.scss | 53 +- Vue_Starter/scss/bootstrap/_card.scss | 80 +- Vue_Starter/scss/bootstrap/_carousel.scss | 6 + Vue_Starter/scss/bootstrap/_close.scss | 4 +- Vue_Starter/scss/bootstrap/_custom-forms.scss | 19 +- Vue_Starter/scss/bootstrap/_dropdown.scss | 57 +- Vue_Starter/scss/bootstrap/_forms.scss | 56 +- Vue_Starter/scss/bootstrap/_functions.scss | 16 +- Vue_Starter/scss/bootstrap/_grid.scss | 1 - Vue_Starter/scss/bootstrap/_input-group.scss | 24 +- Vue_Starter/scss/bootstrap/_mixins.scss | 1 + Vue_Starter/scss/bootstrap/_modal.scss | 13 +- Vue_Starter/scss/bootstrap/_nav.scss | 10 +- Vue_Starter/scss/bootstrap/_navbar.scss | 32 +- Vue_Starter/scss/bootstrap/_pagination.scss | 6 +- Vue_Starter/scss/bootstrap/_popover.scss | 33 +- Vue_Starter/scss/bootstrap/_print.scss | 5 +- Vue_Starter/scss/bootstrap/_progress.scss | 10 +- Vue_Starter/scss/bootstrap/_reboot.scss | 55 +- Vue_Starter/scss/bootstrap/_root.scss | 19 + Vue_Starter/scss/bootstrap/_tables.scss | 68 +- Vue_Starter/scss/bootstrap/_tooltip.scss | 12 +- Vue_Starter/scss/bootstrap/_transitions.scss | 2 + Vue_Starter/scss/bootstrap/_type.scss | 2 + Vue_Starter/scss/bootstrap/_variables.scss | 943 +++++++++--------- .../scss/bootstrap/bootstrap-grid.scss | 16 +- .../scss/bootstrap/bootstrap-reboot.scss | 11 +- Vue_Starter/scss/bootstrap/bootstrap.scss | 3 +- Vue_Starter/scss/bootstrap/mixins/_alert.scss | 2 +- .../bootstrap/mixins/_background-variant.scss | 8 + Vue_Starter/scss/bootstrap/mixins/_badge.scss | 4 +- .../scss/bootstrap/mixins/_breakpoints.scss | 22 +- .../scss/bootstrap/mixins/_buttons.scss | 43 +- Vue_Starter/scss/bootstrap/mixins/_caret.scss | 35 + Vue_Starter/scss/bootstrap/mixins/_float.scss | 2 + Vue_Starter/scss/bootstrap/mixins/_forms.scss | 35 +- .../scss/bootstrap/mixins/_gradients.scss | 8 + .../bootstrap/mixins/_grid-framework.scss | 15 +- Vue_Starter/scss/bootstrap/mixins/_grid.scss | 15 +- Vue_Starter/scss/bootstrap/mixins/_hover.scss | 25 +- Vue_Starter/scss/bootstrap/mixins/_image.scss | 6 +- .../scss/bootstrap/mixins/_list-group.scss | 2 - .../scss/bootstrap/mixins/_navbar-align.scss | 3 +- .../scss/bootstrap/mixins/_reset-text.scss | 3 +- .../scss/bootstrap/mixins/_screen-reader.scss | 4 +- .../scss/bootstrap/mixins/_text-emphasis.scss | 2 + .../scss/bootstrap/mixins/_visibility.scss | 2 + .../scss/bootstrap/utilities/_align.scss | 2 + .../scss/bootstrap/utilities/_background.scss | 19 +- .../scss/bootstrap/utilities/_borders.scss | 8 +- .../scss/bootstrap/utilities/_display.scss | 3 + .../scss/bootstrap/utilities/_flex.scss | 2 + .../scss/bootstrap/utilities/_position.scss | 13 +- .../scss/bootstrap/utilities/_sizing.scss | 2 + .../scss/bootstrap/utilities/_spacing.scss | 38 +- .../scss/bootstrap/utilities/_text.scss | 11 +- Vue_Starter/scss/core/_breadcrumb-menu.scss | 12 +- Vue_Starter/scss/core/_breadcrumb.scss | 2 - Vue_Starter/scss/core/_layout.scss | 2 +- Vue_Starter/scss/core/_variables.scss | 2 - Vue_Starter/scss/style.scss | 2 +- Vue_Starter/src/components/SidebarNavLink.vue | 12 +- package.json | 2 +- 157 files changed, 2406 insertions(+), 1840 deletions(-) create mode 100755 Vue_Full_Project/scss/bootstrap/_root.scss create mode 100755 Vue_Full_Project/scss/bootstrap/mixins/_caret.scss create mode 100755 Vue_Starter/scss/bootstrap/_root.scss create mode 100755 Vue_Starter/scss/bootstrap/mixins/_caret.scss diff --git a/Vue_Full_Project/CHANGELOG.md b/Vue_Full_Project/CHANGELOG.md index 90556bdb..5d8803a9 100644 --- a/Vue_Full_Project/CHANGELOG.md +++ b/Vue_Full_Project/CHANGELOG.md @@ -1,8 +1,13 @@ ## [vue](./README.md) version `changelog` +###### `v1.0.3` +- moved vue-chartjs to `3.0.0` **[breaking change](https://github.com/apertureless/vue-chartjs/releases/tag/v3.0.0)** :fire: + ###### `v1.0.2` - moved to vue: `^2.5.x` +- updated bootstrap-vue to `1.0.0-beta.9` - (vue `v2.5.x`) deprecated ` + diff --git a/Vue_Full_Project/src/components/SidebarNavLink.vue b/Vue_Full_Project/src/components/SidebarNavLink.vue index 8bc5fcef..b7e40432 100644 --- a/Vue_Full_Project/src/components/SidebarNavLink.vue +++ b/Vue_Full_Project/src/components/SidebarNavLink.vue @@ -1,5 +1,5 @@ diff --git a/Vue_Full_Project/src/views/charts/DoughnutExample.vue b/Vue_Full_Project/src/views/charts/DoughnutExample.vue index f17be7b8..2cd26b56 100644 --- a/Vue_Full_Project/src/views/charts/DoughnutExample.vue +++ b/Vue_Full_Project/src/views/charts/DoughnutExample.vue @@ -1,7 +1,8 @@ diff --git a/Vue_Full_Project/src/views/charts/LineExample.vue b/Vue_Full_Project/src/views/charts/LineExample.vue index 0275a62f..efd444af 100644 --- a/Vue_Full_Project/src/views/charts/LineExample.vue +++ b/Vue_Full_Project/src/views/charts/LineExample.vue @@ -1,7 +1,8 @@ diff --git a/Vue_Full_Project/src/views/charts/PieExample.vue b/Vue_Full_Project/src/views/charts/PieExample.vue index aa879f63..2b68b466 100644 --- a/Vue_Full_Project/src/views/charts/PieExample.vue +++ b/Vue_Full_Project/src/views/charts/PieExample.vue @@ -1,7 +1,8 @@ diff --git a/Vue_Full_Project/src/views/charts/PolarAreaExample.vue b/Vue_Full_Project/src/views/charts/PolarAreaExample.vue index 4985c1d0..d86a725e 100644 --- a/Vue_Full_Project/src/views/charts/PolarAreaExample.vue +++ b/Vue_Full_Project/src/views/charts/PolarAreaExample.vue @@ -1,7 +1,8 @@ diff --git a/Vue_Full_Project/src/views/charts/RadarExample.vue b/Vue_Full_Project/src/views/charts/RadarExample.vue index f5777dcb..61d2da14 100644 --- a/Vue_Full_Project/src/views/charts/RadarExample.vue +++ b/Vue_Full_Project/src/views/charts/RadarExample.vue @@ -1,7 +1,8 @@ diff --git a/Vue_Full_Project/src/views/components/Buttons.vue b/Vue_Full_Project/src/views/components/Buttons.vue index 28d120f5..738e6679 100644 --- a/Vue_Full_Project/src/views/components/Buttons.vue +++ b/Vue_Full_Project/src/views/components/Buttons.vue @@ -68,7 +68,19 @@
- Active state Add this :pressed="true" + Active state Add this :active="true" +
+ Primary + Secondary + Success + Info + Warning + Danger + Link + + +
+ Pressed state Add this :pressed="true"
Primary Secondary @@ -78,6 +90,18 @@ Danger Link + +
+ Toggle pressed state +
+ Primary {{myToggle ? 'On ' : 'Off'}} + Secondary {{myToggle ? 'On ' : 'Off'}} + Success {{myToggle ? 'On ' : 'Off'}} + Info {{myToggle ? 'On ' : 'Off'}} + Warning {{myToggle ? 'On ' : 'Off'}} + Danger {{myToggle ? 'On ' : 'Off'}} + +
Block Level Buttons Add this :block="true" @@ -130,7 +154,7 @@
- Size Small Add this size="sm" + Size Small Add this size="sm"
Primary Secondary @@ -152,7 +176,18 @@
- Active state Add this :pressed="true" + Active state Add this :active="true" +
+ Primary + Secondary + Success + Info + Warning + Danger + + +
+ Pressed state Add this :pressed="true"
Primary Secondary @@ -161,6 +196,17 @@ Warning Danger + +
+ Toggle pressed state +
+ Primary {{myToggle ? 'On ' : 'Off'}} + Secondary {{myToggle ? 'On ' : 'Off'}} + Success {{myToggle ? 'On ' : 'Off'}} + Info {{myToggle ? 'On ' : 'Off'}} + Warning {{myToggle ? 'On ' : 'Off'}} + Danger {{myToggle ? 'On ' : 'Off'}} +
Block Level Buttons Add this :block="true" @@ -179,6 +225,9 @@ diff --git a/Vue_Full_Project/src/views/components/Forms.vue b/Vue_Full_Project/src/views/components/Forms.vue index 1a5e6a4a..e2320086 100644 --- a/Vue_Full_Project/src/views/components/Forms.vue +++ b/Vue_Full_Project/src/views/components/Forms.vue @@ -460,11 +460,11 @@
- +
- +
Please provide a valid informations. diff --git a/Vue_Full_Project/src/views/dashboard/CalloutChartExample.vue b/Vue_Full_Project/src/views/dashboard/CalloutChartExample.vue index 5100b7c0..1389a1af 100644 --- a/Vue_Full_Project/src/views/dashboard/CalloutChartExample.vue +++ b/Vue_Full_Project/src/views/dashboard/CalloutChartExample.vue @@ -7,7 +7,8 @@ import { Line } from 'vue-chartjs' // const brandWarning = '#f8cb00' // const brandDanger = '#f86c6b' -export default Line.extend({ +export default { + extends: Line, props: ['data', 'height', 'width', 'variant'], mounted () { this.renderChart({ @@ -46,5 +47,5 @@ export default Line.extend({ } }) } -}) +} diff --git a/Vue_Full_Project/src/views/dashboard/CardBarChartExample.vue b/Vue_Full_Project/src/views/dashboard/CardBarChartExample.vue index 9fd27fc3..c69d1319 100644 --- a/Vue_Full_Project/src/views/dashboard/CardBarChartExample.vue +++ b/Vue_Full_Project/src/views/dashboard/CardBarChartExample.vue @@ -10,7 +10,8 @@ const datasets = [ } ] -export default Bar.extend({ +export default { + extends: Bar, props: ['height'], mounted () { this.renderChart({ @@ -33,5 +34,5 @@ export default Bar.extend({ } }) } -}) +} diff --git a/Vue_Full_Project/src/views/dashboard/CardLine1ChartExample.vue b/Vue_Full_Project/src/views/dashboard/CardLine1ChartExample.vue index 29e5080a..bc974493 100644 --- a/Vue_Full_Project/src/views/dashboard/CardLine1ChartExample.vue +++ b/Vue_Full_Project/src/views/dashboard/CardLine1ChartExample.vue @@ -11,7 +11,8 @@ const datasets = [ } ] -export default Line.extend({ +export default { + extends: Line, props: ['height'], mounted () { this.renderChart({ @@ -54,5 +55,5 @@ export default Line.extend({ } }) } -}) +} diff --git a/Vue_Full_Project/src/views/dashboard/CardLine2ChartExample.vue b/Vue_Full_Project/src/views/dashboard/CardLine2ChartExample.vue index b8e11c55..a449df6b 100644 --- a/Vue_Full_Project/src/views/dashboard/CardLine2ChartExample.vue +++ b/Vue_Full_Project/src/views/dashboard/CardLine2ChartExample.vue @@ -11,7 +11,8 @@ const datasets = [ } ] -export default Line.extend({ +export default { + extends: Line, props: ['height'], mounted () { this.renderChart({ @@ -56,5 +57,5 @@ export default Line.extend({ } }) } -}) +} diff --git a/Vue_Full_Project/src/views/dashboard/CardLine3ChartExample.vue b/Vue_Full_Project/src/views/dashboard/CardLine3ChartExample.vue index 0bbdcd6a..da27ed07 100644 --- a/Vue_Full_Project/src/views/dashboard/CardLine3ChartExample.vue +++ b/Vue_Full_Project/src/views/dashboard/CardLine3ChartExample.vue @@ -10,7 +10,8 @@ const datasets = [ } ] -export default Line.extend({ +export default { + extends: Line, props: ['height'], mounted () { this.renderChart({ @@ -41,5 +42,5 @@ export default Line.extend({ } }) } -}) +} diff --git a/Vue_Full_Project/src/views/dashboard/MainChartExample.vue b/Vue_Full_Project/src/views/dashboard/MainChartExample.vue index ae1615c4..c97990fd 100644 --- a/Vue_Full_Project/src/views/dashboard/MainChartExample.vue +++ b/Vue_Full_Project/src/views/dashboard/MainChartExample.vue @@ -20,7 +20,8 @@ function random (min, max) { return Math.floor(Math.random() * (max - min + 1) + min) } -export default Line.extend({ +export default { + extends: Line, props: ['height'], mounted () { var elements = 27 @@ -95,5 +96,5 @@ export default Line.extend({ } }) } -}) +} diff --git a/Vue_Full_Project/src/views/dashboard/SocialBoxChartExample.vue b/Vue_Full_Project/src/views/dashboard/SocialBoxChartExample.vue index 4feea132..1d948111 100644 --- a/Vue_Full_Project/src/views/dashboard/SocialBoxChartExample.vue +++ b/Vue_Full_Project/src/views/dashboard/SocialBoxChartExample.vue @@ -1,7 +1,8 @@ diff --git a/Vue_Full_Project/src/views/pages/Login.vue b/Vue_Full_Project/src/views/pages/Login.vue index 9dfedb49..079844b7 100644 --- a/Vue_Full_Project/src/views/pages/Login.vue +++ b/Vue_Full_Project/src/views/pages/Login.vue @@ -3,7 +3,7 @@
-
+

Login

diff --git a/Vue_Starter/package.json b/Vue_Starter/package.json index 5317c798..c800b3c4 100644 --- a/Vue_Starter/package.json +++ b/Vue_Starter/package.json @@ -1,6 +1,6 @@ { "name": "@coreui/vue", - "version": "1.0.2", + "version": "1.0.3", "description": "", "author": "Łukasz Holeczek ", "private": true, @@ -17,43 +17,42 @@ "bootstrap-vue": "1.0.0-beta.9", "chart.js": "2.7.0", "font-awesome": "^4.7.0", - "is-url-external": "^1.0.3", "simple-line-icons": "^2.4.1", - "vue": "2.4.4", - "vue-chartjs": "2.8.7", - "vue-router": "2.7.0" + "vue": "^2.5.2", + "vue-chartjs": "^3.0.0", + "vue-router": "^3.0.1" }, "devDependencies": { - "autoprefixer": "7.1.4", + "autoprefixer": "7.1.5", "babel-core": "6.26.0", - "babel-eslint": "8.0.0", + "babel-eslint": "8.0.1", "babel-loader": "7.1.2", "babel-plugin-transform-runtime": "^6.22.0", - "babel-preset-env": "1.6.0", + "babel-preset-env": "1.6.1", "babel-preset-stage-2": "6.24.1", "babel-register": "6.26.0", - "chalk": "2.1.0", - "connect-history-api-fallback": "^1.3.0", - "copy-webpack-plugin": "^4.0.1", + "chalk": "2.2.0", + "connect-history-api-fallback": "^1.4.0", + "copy-webpack-plugin": "^4.1.1", "css-loader": "0.28.7", - "eslint": "4.7.2", + "eslint": "^4.9.0", "eslint-friendly-formatter": "3.0.0", "eslint-loader": "1.9.0", "eslint-plugin-html": "3.2.2", "eslint-plugin-import": "2.7.0", - "eslint-plugin-node": "5.1.1", + "eslint-plugin-node": "5.2.0", "eslint-config-standard": "10.2.1", - "eslint-plugin-promise": "3.5.0", + "eslint-plugin-promise": "3.6.0", "eslint-plugin-standard": "3.0.1", "eventsource-polyfill": "^0.9.6", - "express": "4.15.5", - "extract-text-webpack-plugin": "3.0.0", - "file-loader": "0.11.2", + "express": "4.16.2", + "extract-text-webpack-plugin": "3.0.1", + "file-loader": "1.1.5", "friendly-errors-webpack-plugin": "1.6.1", "html-webpack-plugin": "2.30.1", "http-proxy-middleware": "0.17.4", "webpack-bundle-analyzer": "2.9.0", - "cross-env": "5.0.5", + "cross-env": "^5.1.0", "karma": "1.7.1", "karma-coverage": "^1.1.1", "karma-mocha": "^1.3.0", @@ -62,32 +61,32 @@ "karma-sinon-chai": "1.3.2", "karma-sourcemap-loader": "^0.3.7", "karma-spec-reporter": "0.0.31", - "karma-webpack": "2.0.4", - "lolex": "2.1.2", - "mocha": "3.5.3", + "karma-webpack": "^2.0.5", + "lolex": "2.1.3", + "mocha": "4.0.1", "chai": "4.1.2", - "sinon": "3.3.0", - "sinon-chai": "2.13.0", + "sinon": "4.0.1", + "sinon-chai": "2.14.0", "inject-loader": "3.0.1", "babel-plugin-istanbul": "4.1.5", "phantomjs-prebuilt": "^2.1.15", - "chromedriver": "2.32.3", - "cross-spawn": "^5.0.1", + "chromedriver": "2.33.1", + "cross-spawn": "^5.1.0", "nightwatch": "0.9.16", - "selenium-server": "3.5.3", + "selenium-server": "3.6.0", "semver": "5.4.1", "shelljs": "0.7.8", "opn": "5.1.0", "optimize-css-assets-webpack-plugin": "3.2.0", "ora": "1.3.0", "rimraf": "2.6.2", - "url-loader": "0.5.9", - "vue-loader": "13.0.5", + "url-loader": "0.6.2", + "vue-loader": "13.3.0", "vue-style-loader": "3.0.3", - "vue-template-compiler": "2.4.4", - "webpack": "3.6.0", + "vue-template-compiler": "^2.5.2", + "webpack": "^3.8.1", "webpack-dev-middleware": "1.12.0", - "webpack-hot-middleware": "2.19.1", + "webpack-hot-middleware": "2.20.0", "webpack-merge": "4.1.0", "node-sass": "4.5.3", "sass-loader": "6.0.6" diff --git a/Vue_Starter/scss/_bootstrap-variables.scss b/Vue_Starter/scss/_bootstrap-variables.scss index d05c9874..9a9c2721 100644 --- a/Vue_Starter/scss/_bootstrap-variables.scss +++ b/Vue_Starter/scss/_bootstrap-variables.scss @@ -76,6 +76,7 @@ $font-size-base: 0.875rem; // Breadcrumbs $breadcrumb-bg: #fff; +$breadcrumb-margin-bottom: 1.5rem; // Cards diff --git a/Vue_Starter/scss/bootstrap/_alert.scss b/Vue_Starter/scss/bootstrap/_alert.scss index 3dfd13f5..66fba24e 100755 --- a/Vue_Starter/scss/bootstrap/_alert.scss +++ b/Vue_Starter/scss/bootstrap/_alert.scss @@ -3,6 +3,7 @@ // .alert { + position: relative; padding: $alert-padding-y $alert-padding-x; margin-bottom: $alert-margin-bottom; border: $alert-border-width solid transparent; @@ -28,9 +29,9 @@ .alert-dismissible { // Adjust close link position .close { - position: relative; - top: -$alert-padding-y; - right: -$alert-padding-x; + position: absolute; + top: 0; + right: 0; padding: $alert-padding-y $alert-padding-x; color: inherit; } diff --git a/Vue_Starter/scss/bootstrap/_badge.scss b/Vue_Starter/scss/bootstrap/_badge.scss index 8a762634..b87a1b00 100755 --- a/Vue_Starter/scss/bootstrap/_badge.scss +++ b/Vue_Starter/scss/bootstrap/_badge.scss @@ -9,11 +9,10 @@ font-size: $badge-font-size; font-weight: $badge-font-weight; line-height: 1; - color: $badge-color; text-align: center; white-space: nowrap; vertical-align: baseline; - @include border-radius(); + @include border-radius($badge-border-radius); // Empty badges collapse automatically &:empty { diff --git a/Vue_Starter/scss/bootstrap/_breadcrumb.scss b/Vue_Starter/scss/bootstrap/_breadcrumb.scss index 2bc0e208..25b9d85a 100755 --- a/Vue_Starter/scss/bootstrap/_breadcrumb.scss +++ b/Vue_Starter/scss/bootstrap/_breadcrumb.scss @@ -1,15 +1,14 @@ .breadcrumb { + display: flex; + flex-wrap: wrap; padding: $breadcrumb-padding-y $breadcrumb-padding-x; - margin-bottom: 1rem; + margin-bottom: $breadcrumb-margin-bottom; list-style: none; background-color: $breadcrumb-bg; @include border-radius($border-radius); - @include clearfix; } .breadcrumb-item { - float: left; - // The separator between breadcrumbs (by default, a forward-slash: "/") + .breadcrumb-item::before { display: inline-block; // Suppress underlining of the separator in modern browsers @@ -28,6 +27,7 @@ + .breadcrumb-item:hover::before { text-decoration: underline; } + // stylelint-disable-next-line no-duplicate-selectors + .breadcrumb-item:hover::before { text-decoration: none; } diff --git a/Vue_Starter/scss/bootstrap/_button-group.scss b/Vue_Starter/scss/bootstrap/_button-group.scss index 30a14d88..1a373f32 100755 --- a/Vue_Starter/scss/bootstrap/_button-group.scss +++ b/Vue_Starter/scss/bootstrap/_button-group.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// stylelint-disable selector-no-qualifying-type // Make the div behave like a button .btn-group, @@ -10,7 +10,6 @@ > .btn { position: relative; flex: 0 1 auto; - margin-bottom: 0; // Bring the hover, focused, and "active" buttons to the front to overlay // the borders properly @@ -48,7 +47,8 @@ border-radius: 0; } -// Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match +// Set corners individual because sometimes a single button can be in a .btn-group +// and we need :first-child and :last-child to both match .btn-group > .btn:first-child { margin-left: 0; @@ -56,25 +56,30 @@ @include border-right-radius(0); } } -// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it +// Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu +// immediately after it .btn-group > .btn:last-child:not(:first-child), .btn-group > .dropdown-toggle:not(:first-child) { @include border-left-radius(0); } -// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group) +// Custom edits for including btn-groups within btn-groups (useful for including +// dropdown buttons within a btn-group) .btn-group > .btn-group { float: left; } + .btn-group > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } + .btn-group > .btn-group:first-child:not(:last-child) { > .btn:last-child, > .dropdown-toggle { @include border-right-radius(0); } } + .btn-group > .btn-group:last-child:not(:first-child) > .btn:first-child { @include border-left-radius(0); } @@ -129,7 +134,6 @@ // .btn-group-vertical { - display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; @@ -146,31 +150,36 @@ margin-top: -$input-btn-border-width; margin-left: 0; } -} -.btn-group-vertical > .btn { - &:not(:first-child):not(:last-child) { + > .btn { + &:not(:first-child):not(:last-child) { + border-radius: 0; + } + + &:first-child:not(:last-child) { + @include border-bottom-radius(0); + } + + &:last-child:not(:first-child) { + @include border-top-radius(0); + } + } + + > .btn-group:not(:first-child):not(:last-child) > .btn { border-radius: 0; } - &:first-child:not(:last-child) { - @include border-bottom-radius(0); + + > .btn-group:first-child:not(:last-child) { + > .btn:last-child, + > .dropdown-toggle { + @include border-bottom-radius(0); + } } - &:last-child:not(:first-child) { + + > .btn-group:last-child:not(:first-child) > .btn:first-child { @include border-top-radius(0); } } -.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn { - border-radius: 0; -} -.btn-group-vertical > .btn-group:first-child:not(:last-child) { - > .btn:last-child, - > .dropdown-toggle { - @include border-bottom-radius(0); - } -} -.btn-group-vertical > .btn-group:last-child:not(:first-child) > .btn:first-child { - @include border-top-radius(0); -} // Checkbox and radio options diff --git a/Vue_Starter/scss/bootstrap/_buttons.scss b/Vue_Starter/scss/bootstrap/_buttons.scss index 607f24a2..7cd27830 100755 --- a/Vue_Starter/scss/bootstrap/_buttons.scss +++ b/Vue_Starter/scss/bootstrap/_buttons.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement +// stylelint-disable selector-no-qualifying-type // // Base styles @@ -22,7 +22,7 @@ &:focus, &.focus { outline: 0; - box-shadow: $btn-focus-box-shadow; + box-shadow: $input-btn-focus-box-shadow; } // Disabled comes first so active can properly restyle @@ -32,10 +32,10 @@ @include box-shadow(none); } - &:active, - &.active { + &:not([disabled]):not(.disabled):active, + &:not([disabled]):not(.disabled).active { background-image: none; - @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow); + @include box-shadow($input-btn-focus-box-shadow, $btn-active-box-shadow); } } @@ -58,7 +58,11 @@ fieldset[disabled] a.btn { @each $color, $value in $theme-colors { .btn-outline-#{$color} { - @include button-outline-variant($value, #fff); + @if $color == "light" { + @include button-outline-variant($value, $gray-900); + } @else { + @include button-outline-variant($value, $white); + } } } @@ -71,36 +75,27 @@ fieldset[disabled] a.btn { .btn-link { font-weight: $font-weight-normal; color: $link-color; - border-radius: 0; + background-color: transparent; - &, - &:active, - &.active, - &:disabled { + @include hover { + color: $link-hover-color; + text-decoration: $link-hover-decoration; background-color: transparent; - @include box-shadow(none); + border-color: transparent; } - &, + &:focus, - &:active { + &.focus { border-color: transparent; box-shadow: none; } - @include hover { - border-color: transparent; - } - @include hover-focus { - color: $link-hover-color; - text-decoration: $link-hover-decoration; - background-color: transparent; - } - &:disabled { - color: $btn-link-disabled-color; - @include hover-focus { - text-decoration: none; - } + &:disabled, + &.disabled { + color: $btn-link-disabled-color; } + + // No need for an active state here } @@ -109,11 +104,11 @@ fieldset[disabled] a.btn { // .btn-lg { - @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $line-height-lg, $btn-border-radius-lg); + @include button-size($input-btn-padding-y-lg, $input-btn-padding-x-lg, $font-size-lg, $input-btn-line-height-lg, $btn-border-radius-lg); } .btn-sm { - @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $line-height-sm, $btn-border-radius-sm); + @include button-size($input-btn-padding-y-sm, $input-btn-padding-x-sm, $font-size-sm, $input-btn-line-height-sm, $btn-border-radius-sm); } diff --git a/Vue_Starter/scss/bootstrap/_card.scss b/Vue_Starter/scss/bootstrap/_card.scss index 1ab85a4e..a739f193 100755 --- a/Vue_Starter/scss/bootstrap/_card.scss +++ b/Vue_Starter/scss/bootstrap/_card.scss @@ -12,6 +12,23 @@ background-clip: border-box; border: $card-border-width solid $card-border-color; @include border-radius($card-border-radius); + + > hr { + margin-right: 0; + margin-left: 0; + } + + > .list-group:first-child { + .list-group-item:first-child { + @include border-top-radius($card-border-radius); + } + } + + > .list-group:last-child { + .list-group-item:last-child { + @include border-bottom-radius($card-border-radius); + } + } } .card-body { @@ -44,21 +61,6 @@ } } -.card { - > .list-group:first-child { - .list-group-item:first-child { - @include border-top-radius($card-border-radius); - } - } - - > .list-group:last-child { - .list-group-item:last-child { - @include border-bottom-radius($card-border-radius); - } - } -} - - // // Optional textual caps // @@ -72,6 +74,12 @@ &:first-child { @include border-radius($card-inner-border-radius $card-inner-border-radius 0 0); } + + + .list-group { + .list-group-item:first-child { + border-top: 0; + } + } } .card-footer { @@ -130,18 +138,26 @@ // Card deck -@include media-breakpoint-up(sm) { - .card-deck { - display: flex; +.card-deck { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-deck-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; margin-right: -$card-deck-margin; margin-left: -$card-deck-margin; .card { display: flex; + // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored flex: 1 0 0%; flex-direction: column; margin-right: $card-deck-margin; + margin-bottom: 0; // Override the default margin-left: $card-deck-margin; } } @@ -152,13 +168,21 @@ // Card groups // -@include media-breakpoint-up(sm) { - .card-group { - display: flex; +.card-group { + display: flex; + flex-direction: column; + + .card { + margin-bottom: $card-group-margin; + } + + @include media-breakpoint-up(sm) { flex-flow: row wrap; .card { + // Flexbugs #4: https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored flex: 1 0 0%; + margin-bottom: 0; + .card { margin-left: 0; @@ -177,6 +201,7 @@ border-bottom-right-radius: 0; } } + &:last-child { @include border-left-radius(0); @@ -188,7 +213,18 @@ } } - &:not(:first-child):not(:last-child) { + &:only-child { + @include border-radius($card-border-radius); + + .card-img-top { + @include border-top-radius($card-border-radius); + } + .card-img-bottom { + @include border-bottom-radius($card-border-radius); + } + } + + &:not(:first-child):not(:last-child):not(:only-child) { border-radius: 0; .card-img-top, diff --git a/Vue_Starter/scss/bootstrap/_carousel.scss b/Vue_Starter/scss/bootstrap/_carousel.scss index 8aa14ace..c3c20738 100755 --- a/Vue_Starter/scss/bootstrap/_carousel.scss +++ b/Vue_Starter/scss/bootstrap/_carousel.scss @@ -90,9 +90,15 @@ } .carousel-control-prev { left: 0; + @if $enable-gradients { + background: linear-gradient(90deg, rgba(0,0,0,.25), rgba(0,0,0,.001)); + } } .carousel-control-next { right: 0; + @if $enable-gradients { + background: linear-gradient(270deg, rgba(0,0,0,.25), rgba(0,0,0,.001)); + } } // Icons for within diff --git a/Vue_Starter/scss/bootstrap/_close.scss b/Vue_Starter/scss/bootstrap/_close.scss index f1814905..897d4868 100755 --- a/Vue_Starter/scss/bootstrap/_close.scss +++ b/Vue_Starter/scss/bootstrap/_close.scss @@ -19,11 +19,11 @@ // If you want the anchor version, it requires `href="#"`. // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile -// scss-lint:disable QualifyingElement +// stylelint-disable property-no-vendor-prefix, selector-no-qualifying-type button.close { padding: 0; background: transparent; border: 0; -webkit-appearance: none; } -// scss-lint:enable QualifyingElement +// stylelint-enable diff --git a/Vue_Starter/scss/bootstrap/_custom-forms.scss b/Vue_Starter/scss/bootstrap/_custom-forms.scss index d1fbf954..a521dbdc 100755 --- a/Vue_Starter/scss/bootstrap/_custom-forms.scss +++ b/Vue_Starter/scss/bootstrap/_custom-forms.scss @@ -1,5 +1,3 @@ -// scss-lint:disable PropertyCount, VendorPrefix - // Embedded icons from Open Iconic. // Released under MIT and copyright 2014 Waybury. // https://useiconic.com/open @@ -24,7 +22,7 @@ &:checked ~ .custom-control-indicator { color: $custom-control-indicator-checked-color; - background-color: $custom-control-indicator-checked-bg; + @include gradient-bg($custom-control-indicator-checked-bg); @include box-shadow($custom-control-indicator-checked-box-shadow); } @@ -35,7 +33,7 @@ &:active ~ .custom-control-indicator { color: $custom-control-indicator-active-color; - background-color: $custom-control-indicator-active-bg; + @include gradient-bg($custom-control-indicator-active-bg); @include box-shadow($custom-control-indicator-active-box-shadow); } @@ -164,6 +162,11 @@ } } + &[multiple] { + height: auto; + background-image: none; + } + &:disabled { color: $custom-select-disabled-color; background-color: $custom-select-disabled-bg; @@ -203,7 +206,7 @@ opacity: 0; &:focus ~ .custom-file-control { - @include box-shadow($custom-file-focus-box-shadow); + box-shadow: $custom-file-focus-box-shadow; } } @@ -214,7 +217,7 @@ left: 0; z-index: 5; height: $custom-file-height; - padding: $custom-file-padding-x $custom-file-padding-y; + padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-color; pointer-events: none; @@ -238,10 +241,10 @@ z-index: 6; display: block; height: $custom-file-height; - padding: $custom-file-padding-x $custom-file-padding-y; + padding: $custom-file-padding-y $custom-file-padding-x; line-height: $custom-file-line-height; color: $custom-file-button-color; - background-color: $custom-file-button-bg; + @include gradient-bg($custom-file-button-bg); border: $custom-file-border-width solid $custom-file-border-color; @include border-radius(0 $custom-file-border-radius $custom-file-border-radius 0); } diff --git a/Vue_Starter/scss/bootstrap/_dropdown.scss b/Vue_Starter/scss/bootstrap/_dropdown.scss index 05e8b165..daa867a5 100755 --- a/Vue_Starter/scss/bootstrap/_dropdown.scss +++ b/Vue_Starter/scss/bootstrap/_dropdown.scss @@ -6,37 +6,7 @@ .dropdown-toggle { // Generate the caret automatically - &::after { - display: inline-block; - width: 0; - height: 0; - margin-left: $caret-width * .85; - vertical-align: $caret-width * .85; - content: ""; - border-top: $caret-width solid; - border-right: $caret-width solid transparent; - border-left: $caret-width solid transparent; - } - - &:empty::after { - margin-left: 0; - } -} - -// Allow for dropdowns to go bottom up (aka, dropup-menu) -// Just add .dropup after the standard .dropdown class and you're set. -.dropup { - .dropdown-menu { - margin-top: 0; - margin-bottom: $dropdown-spacer; - } - - .dropdown-toggle { - &::after { - border-top: 0; - border-bottom: $caret-width solid; - } - } + @include caret; } // The dropdown menu @@ -61,6 +31,19 @@ @include box-shadow($dropdown-box-shadow); } +// Allow for dropdowns to go bottom up (aka, dropup-menu) +// Just add .dropup after the standard .dropdown class and you're set. +.dropup { + .dropdown-menu { + margin-top: 0; + margin-bottom: $dropdown-spacer; + } + + .dropdown-toggle { + @include caret(up); + } +} + // Dividers (basically an `
`) within the dropdown .dropdown-divider { @include nav-divider($dropdown-divider-bg); @@ -84,14 +67,14 @@ @include hover-focus { color: $dropdown-link-hover-color; text-decoration: none; - background-color: $dropdown-link-hover-bg; + @include gradient-bg($dropdown-link-hover-bg); } &.active, &:active { color: $dropdown-link-active-color; text-decoration: none; - background-color: $dropdown-link-active-bg; + @include gradient-bg($dropdown-link-active-bg); } &.disabled, @@ -105,14 +88,6 @@ } } -// Open state for the dropdown -.show { - // Remove the outline when :focus is triggered - > a { - outline: 0; - } -} - .dropdown-menu.show { display: block; } diff --git a/Vue_Starter/scss/bootstrap/_forms.scss b/Vue_Starter/scss/bootstrap/_forms.scss index 519554b4..80bc7f3b 100755 --- a/Vue_Starter/scss/bootstrap/_forms.scss +++ b/Vue_Starter/scss/bootstrap/_forms.scss @@ -1,4 +1,4 @@ -// scss-lint:disable QualifyingElement, VendorPrefix +// stylelint-disable selector-no-qualifying-type // // Textual form controls @@ -7,8 +7,6 @@ .form-control { display: block; width: 100%; - // // Make inputs at least the height of their button counterpart (base line-height + padding + border) - // height: $input-height; padding: $input-btn-padding-y $input-btn-padding-x; font-size: $font-size-base; line-height: $input-btn-line-height; @@ -90,21 +88,24 @@ select.form-control { // For use with horizontal and inline forms, when you need the label text to // align with the form controls. .col-form-label { - padding-top: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); - padding-bottom: calc(#{$input-btn-padding-y} - #{$input-btn-border-width} * 2); + padding-top: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); + padding-bottom: calc(#{$input-btn-padding-y} + #{$input-btn-border-width}); margin-bottom: 0; // Override the `