diff --git a/.eslintrc.js b/.eslintrc.js index ff6b29810..9a33e5f6c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -11,6 +11,7 @@ module.exports = { 'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off', 'comma-dangle': ['error', 'only-multiline'], + 'curly': 'error', }, parserOptions: { parser: 'babel-eslint', diff --git a/.postcssrc.js b/.postcssrc.js index 961986e2b..90d9fffcb 100644 --- a/.postcssrc.js +++ b/.postcssrc.js @@ -1,5 +1,5 @@ module.exports = { plugins: { - autoprefixer: {} - } + autoprefixer: {}, + }, } diff --git a/babel.config.js b/babel.config.js index ba179669a..d39e57b42 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,5 +1,5 @@ module.exports = { presets: [ - '@vue/app' - ] + '@vue/app', + ], } diff --git a/config/dev.env.js b/config/dev.env.js index 1e22973ae..55a82ff30 100644 --- a/config/dev.env.js +++ b/config/dev.env.js @@ -3,5 +3,5 @@ const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { - NODE_ENV: '"development"' + NODE_ENV: '"development"', }) diff --git a/config/index.js b/config/index.js index 077e7bc6a..9ec9eba3b 100644 --- a/config/index.js +++ b/config/index.js @@ -20,7 +20,7 @@ module.exports = { // View the bundle analyzer report after build finishes: // `npm run build --report` // Set to `true` or `false` to always turn it on or off - bundleAnalyzerReport: process.env.npm_config_report + bundleAnalyzerReport: process.env.npm_config_report, }, dev: { env: require('./dev.env'), @@ -34,6 +34,6 @@ module.exports = { // (https://github.com/webpack/css-loader#sourcemaps) // In our experience, they generally work as expected, // just be aware of this issue when enabling this option. - cssSourceMap: false - } + cssSourceMap: false, + }, } diff --git a/config/prod.env.js b/config/prod.env.js index a6f997616..1aa0fbce9 100644 --- a/config/prod.env.js +++ b/config/prod.env.js @@ -1,4 +1,4 @@ 'use strict' module.exports = { - NODE_ENV: '"production"' + NODE_ENV: '"production"', } diff --git a/jest.config.js b/jest.config.js index 83ba219e4..ee6c40f8e 100644 --- a/jest.config.js +++ b/jest.config.js @@ -3,21 +3,21 @@ module.exports = { 'js', 'jsx', 'json', - 'vue' + 'vue', ], transform: { '^.+\\.vue$': 'vue-jest', '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub', - '^.+\\.jsx?$': 'babel-jest' + '^.+\\.jsx?$': 'babel-jest', }, moduleNameMapper: { - '^@/(.*)$': '/src/$1' + '^@/(.*)$': '/src/$1', }, snapshotSerializers: [ - 'jest-serializer-vue' + 'jest-serializer-vue', ], testMatch: [ - '**/src/**/*.spec.(js|jsx|ts|tsx)' + '**/src/**/*.spec.(js|jsx|ts|tsx)', ], - testURL: 'http://localhost/' + testURL: 'http://localhost/', } diff --git a/src/.eslintrc.js b/src/.eslintrc.js index 958d51ba2..c529c260c 100644 --- a/src/.eslintrc.js +++ b/src/.eslintrc.js @@ -1,5 +1,5 @@ module.exports = { env: { - jest: true - } + jest: true, + }, } diff --git a/src/app/App.vue b/src/app/App.vue index 33e1a191b..268d66cc7 100644 --- a/src/app/App.vue +++ b/src/app/App.vue @@ -6,7 +6,7 @@ @@ -15,6 +15,7 @@ export default { body { height: 100%; + #app { height: 100%; } diff --git a/src/app/main.js b/src/app/main.js index bd3fa36b5..217d271ce 100644 --- a/src/app/main.js +++ b/src/app/main.js @@ -1,7 +1,6 @@ // Polyfills import 'es6-promise/auto' import 'babel-polyfill' - // The Vue build version to load with the `import` command // (runtime-only or standalone) has been set in webpack.base.conf with an alias. import Vue from 'vue' diff --git a/src/assets/icons/menu-collapsed.svg b/src/assets/icons/menu-collapsed.svg index 769479481..244be685d 100644 --- a/src/assets/icons/menu-collapsed.svg +++ b/src/assets/icons/menu-collapsed.svg @@ -1,11 +1,13 @@ - + - - + - + - - - + + + diff --git a/src/components/admin/app-sidebar/components/SidebarLink.vue b/src/components/admin/app-sidebar/components/SidebarLink.vue index a527ee2fa..9a3c40aa5 100644 --- a/src/components/admin/app-sidebar/components/SidebarLink.vue +++ b/src/components/admin/app-sidebar/components/SidebarLink.vue @@ -51,22 +51,27 @@ export default { align-items: center; cursor: pointer; text-decoration: none; + &.router-link-active, &:hover { color: $white; background-color: $sidebar-link-active-bg; + .sidebar-menu-item-icon, .expand-icon { color: $white; } } + &:hover { background-color: $hover-black; } + .sidebar-menu-item-icon { font-size: $sidebar-menu-item-icon-size; color: $vue-green; margin-right: 14px; + &.fa-dashboard { /* Temp fix */ position: relative; diff --git a/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue b/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue index 1d9b4dddc..9b26ead4c 100644 --- a/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue +++ b/src/components/admin/app-sidebar/components/SidebarLinkGroup.vue @@ -25,7 +25,7 @@ export default { name: 'sidebar-link-group', components: { SidebarLink, - Expanding + Expanding, }, data () { return { @@ -69,6 +69,7 @@ export default { font-weight: bold; transition: transform 0.3s ease; } + &.expanded { .expand-icon { transform: rotate(180deg); @@ -79,10 +80,12 @@ export default { .sidebar-submenu { list-style: none; padding-left: 0; + li { display: block; padding-left: 0; } + .sidebar-link__router-link { height: $sidebar-submenu-link-height; padding-left: $sidebar-submenu-link-pl; diff --git a/src/components/auth/AuthLayout.vue b/src/components/auth/AuthLayout.vue index 63eb452b0..56f8cbde5 100644 --- a/src/components/auth/AuthLayout.vue +++ b/src/components/auth/AuthLayout.vue @@ -43,12 +43,14 @@ export default { background-color: $top-nav-bg; overflow: hidden; @include va-flex-center(); + &__logo { z-index: 2; position: absolute; height: $auth-wallpaper-ivuestic-h; width: 100%; } + .va-icon-vuestic { height: $auth-wallpaper-ivuestic-h; width: 100%; @@ -69,11 +71,13 @@ export default { display: none; height: $top-mobile-nav-height; background-color: $top-nav-bg; + .va-icon-vuestic { height: $auth-mobile-nav-ivuestic-h; width: 100%; } } + .main { height: 100vh; @@ -89,9 +93,11 @@ export default { .main { height: $auth-mobile-main-h; + .auth-content { align-items: flex-start; } + .auth-wallpaper { display: none; } diff --git a/src/components/auth/login/Login.vue b/src/components/auth/login/Login.vue index 52a803389..4b1c98950 100644 --- a/src/components/auth/login/Login.vue +++ b/src/components/auth/login/Login.vue @@ -35,7 +35,7 @@ diff --git a/src/components/auth/signup/Signup.vue b/src/components/auth/signup/Signup.vue index 5e25ebb94..90adae7bb 100644 --- a/src/components/auth/signup/Signup.vue +++ b/src/components/auth/signup/Signup.vue @@ -5,13 +5,15 @@
- + +
- + +
diff --git a/src/components/dashboard/Dashboard.vue b/src/components/dashboard/Dashboard.vue index ea5635042..40a6c9a9d 100644 --- a/src/components/dashboard/Dashboard.vue +++ b/src/components/dashboard/Dashboard.vue @@ -1,28 +1,28 @@ diff --git a/src/components/dashboard/DashboardBottomWidgets.vue b/src/components/dashboard/DashboardBottomWidgets.vue index 18a9cf336..c5f6b1158 100644 --- a/src/components/dashboard/DashboardBottomWidgets.vue +++ b/src/components/dashboard/DashboardBottomWidgets.vue @@ -2,7 +2,7 @@
- +
diff --git a/src/components/dashboard/DashboardInfoWidgets.vue b/src/components/dashboard/DashboardInfoWidgets.vue index a36aa754a..00ac379d1 100644 --- a/src/components/dashboard/DashboardInfoWidgets.vue +++ b/src/components/dashboard/DashboardInfoWidgets.vue @@ -62,39 +62,39 @@ diff --git a/src/components/dashboard/setup-profile-tab/SetupProfileTab.vue b/src/components/dashboard/setup-profile-tab/SetupProfileTab.vue index 65b0ea469..d6e5598d1 100644 --- a/src/components/dashboard/setup-profile-tab/SetupProfileTab.vue +++ b/src/components/dashboard/setup-profile-tab/SetupProfileTab.vue @@ -23,7 +23,8 @@ required="required"/> - + + {{ errors.first('name') }} diff --git a/src/components/extra/Extra.vue b/src/components/extra/Extra.vue index 7568faa90..0e41b768a 100644 --- a/src/components/extra/Extra.vue +++ b/src/components/extra/Extra.vue @@ -39,7 +39,7 @@
- +
diff --git a/src/components/forms/form-elements/FormElements.vue b/src/components/forms/form-elements/FormElements.vue index 2d4308136..d40285e3b 100644 --- a/src/components/forms/form-elements/FormElements.vue +++ b/src/components/forms/form-elements/FormElements.vue @@ -12,7 +12,8 @@
+ | translate}} +
+ | translate}} + {{ errors.first('successfulEmail') }} @@ -47,7 +49,8 @@ v-show="errors.has('wrongEmail')" icon="fa fa-exclamation-triangle icon-right input-icon"/> + | translate}} + {{ errors.first('wrongEmail') @@ -60,7 +63,8 @@ + | translate}} +
@@ -74,7 +78,8 @@ required/> + | translate}} +
@@ -86,14 +91,16 @@ @click.native="clear('clearableText')"/> + | translate}} +
+ | translate}} + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed @@ -111,15 +118,17 @@
+ | translate}} +
- {{ $t('forms.inputs.upload') }} + {{ $t('forms.inputs.upload') }}
+ | translate }} +
@@ -147,7 +156,8 @@ /> + +
@@ -415,7 +425,7 @@ export default { readonly: true, disabled: true, error: false, - errorMessages: true + errorMessages: true, }, errorMessages: ['error message 1', 'error message 2'], datepicker: { diff --git a/src/components/forms/form-wizard/FormWizard.vue b/src/components/forms/form-wizard/FormWizard.vue index 98caa0546..ff55569c4 100644 --- a/src/components/forms/form-wizard/FormWizard.vue +++ b/src/components/forms/form-wizard/FormWizard.vue @@ -29,7 +29,8 @@ + translate}} + {{ errors.first('hsName') }} @@ -111,7 +112,8 @@ + translate}} + {{ errors.first('hrName') }} @@ -191,7 +193,8 @@ + translate}} + {{ errors.first('vrName') }} @@ -274,7 +277,8 @@ + translate}} + {{ errors.first('vsName') }} diff --git a/src/components/maps/google-maps/GoogleMapsPage.vue b/src/components/maps/google-maps/GoogleMapsPage.vue index a30710524..7bc10a9ef 100644 --- a/src/components/maps/google-maps/GoogleMapsPage.vue +++ b/src/components/maps/google-maps/GoogleMapsPage.vue @@ -25,11 +25,11 @@ export default { diff --git a/src/components/pages/404-pages/CategoriesConfig.js b/src/components/pages/404-pages/CategoriesConfig.js index d18230f51..c310b5760 100644 --- a/src/components/pages/404-pages/CategoriesConfig.js +++ b/src/components/pages/404-pages/CategoriesConfig.js @@ -95,8 +95,8 @@ export default [ }, { itemName: 'Spacing', - itemLink: '/admin/ui/spacing' - } + itemLink: '/admin/ui/spacing', + }, ], }, { diff --git a/src/components/statistics/progress-bars/ProgressBars.vue b/src/components/statistics/progress-bars/ProgressBars.vue index 12d6d796a..35b448273 100644 --- a/src/components/statistics/progress-bars/ProgressBars.vue +++ b/src/components/statistics/progress-bars/ProgressBars.vue @@ -25,6 +25,6 @@ import ColorfulBars from './Widgets/ColorfulBars' export default { name: 'progress-bars', - components: { HorizontalBars, CircleBars, ColorfulBars } + components: { HorizontalBars, CircleBars, ColorfulBars }, } diff --git a/src/components/statistics/progress-bars/Widgets/CircleBars.vue b/src/components/statistics/progress-bars/Widgets/CircleBars.vue index f9a26139e..553c60588 100644 --- a/src/components/statistics/progress-bars/Widgets/CircleBars.vue +++ b/src/components/statistics/progress-bars/Widgets/CircleBars.vue @@ -26,7 +26,7 @@ export default { data () { return { - value: 0 + value: 0, } }, mounted () { @@ -37,7 +37,7 @@ export default { setTimeout(() => { this.value = 100 }) - } - } + }, + }, } diff --git a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue index d1238e315..4cb159e8b 100644 --- a/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue +++ b/src/components/statistics/progress-bars/Widgets/ColorfulBars.vue @@ -8,7 +8,8 @@ {{ themes[n - 1] }} + >{{ themes[n - 1] }} +
Black @@ -22,7 +23,7 @@ export default { data () { return { value: 0, - themes: ['Danger', 'Success', 'Warning'] + themes: ['Danger', 'Success', 'Warning'], } }, mounted () { @@ -31,7 +32,7 @@ export default { methods: { animateValue () { setTimeout(() => (this.value = 100)) - } - } + }, + }, } diff --git a/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue b/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue index 8b746748c..6d40e9d74 100644 --- a/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue +++ b/src/components/statistics/progress-bars/Widgets/HorizontalBars.vue @@ -23,7 +23,8 @@ :value="bufferValues.value" :buffer="bufferValues.buffer" theme="Info" - >Buffering + >Buffering +
Loading... @@ -39,8 +40,8 @@ export default { value: 0, bufferValues: { value: 0, - buffer: 0 - } + buffer: 0, + }, } }, mounted () { @@ -62,7 +63,7 @@ export default { clearInterval(interval) } }, 400) - } - } + }, + }, } diff --git a/src/components/tables/Tables.vue b/src/components/tables/Tables.vue index 6eb3eff3c..96d038eea 100644 --- a/src/components/tables/Tables.vue +++ b/src/components/tables/Tables.vue @@ -211,7 +211,8 @@ import FieldsDef from '../../vuestic-theme/vuestic-components/vuestic-datatable/data/fields-definition' import ItemsPerPageDef from '../../vuestic-theme/vuestic-components/vuestic-datatable/data/items-per-page-definition' -import QueryParams from '../../vuestic-theme/vuestic-components/vuestic-datatable/data/query-params' +import QueryParams + from '../../vuestic-theme/vuestic-components/vuestic-datatable/data/query-params' import { SpringSpinner } from 'epic-spinners' Vue.component('badge-column', BadgeColumn) @@ -219,7 +220,7 @@ Vue.component('badge-column', BadgeColumn) export default { name: 'Table', components: { - SpringSpinner + SpringSpinner, }, data () { return { diff --git a/src/components/ui/buttons/Buttons.vue b/src/components/ui/buttons/Buttons.vue index 23f58eacb..aaa4345e5 100644 --- a/src/components/ui/buttons/Buttons.vue +++ b/src/components/ui/buttons/Buttons.vue @@ -8,12 +8,12 @@ >
- {{ $t('buttons.default') }} - {{ $t('buttons.disabled') }} - {{ $t('buttons.outline') }} - {{ $t('buttons.disabled') }} - {{ $t('buttons.flat') }} - {{ $t('buttons.disabled') }} + {{ $t('buttons.default') }} + {{ $t('buttons.disabled') }} + {{ $t('buttons.outline') }} + {{ $t('buttons.disabled') }} + {{ $t('buttons.flat') }} + {{ $t('buttons.disabled') }}
@@ -26,9 +26,9 @@ >
- {{ $t('buttons.small') }} - {{ $t('buttons.normal') }} - {{ $t('buttons.large') }} + {{ $t('buttons.small') }} + {{ $t('buttons.normal') }} + {{ $t('buttons.large') }}
@@ -40,7 +40,7 @@ >
- {{ $t('buttons.button') }} + {{ $t('buttons.button') }} @@ -62,8 +62,8 @@ >
- {{ $t('buttons.button') }} - {{ $t('buttons.button') }} + {{ $t('buttons.button') }} + {{ $t('buttons.button') }} @@ -82,32 +82,32 @@ >
- {{ $t('buttons.danger') }} - {{ $t('buttons.info') }} - {{ $t('buttons.dark') }} - {{ $t('buttons.warning') }} - {{ $t('buttons.success') }} - {{ $t('buttons.gray') }} + {{ $t('buttons.danger') }} + {{ $t('buttons.info') }} + {{ $t('buttons.dark') }} + {{ $t('buttons.warning') }} + {{ $t('buttons.success') }} + {{ $t('buttons.gray') }}
- {{ $t('buttons.danger') }} - {{ $t('buttons.info') }} - {{ $t('buttons.dark') }} - {{ $t('buttons.warning') }} - {{ $t('buttons.success') }} - {{ $t('buttons.gray') }} + {{ $t('buttons.danger') }} + {{ $t('buttons.info') }} + {{ $t('buttons.dark') }} + {{ $t('buttons.warning') }} + {{ $t('buttons.success') }} + {{ $t('buttons.gray') }}
- {{ $t('buttons.danger') }} - {{ $t('buttons.info') }} - {{ $t('buttons.dark') }} - {{ $t('buttons.warning') }} - {{ $t('buttons.success') }} - {{ $t('buttons.gray') }} + {{ $t('buttons.danger') }} + {{ $t('buttons.info') }} + {{ $t('buttons.dark') }} + {{ $t('buttons.warning') }} + {{ $t('buttons.success') }} + {{ $t('buttons.gray') }}
@@ -121,16 +121,16 @@
- One - Two - Three + One + Two + Three
- First - Second - Third + First + Second + Third
@@ -138,30 +138,30 @@ First - Second - Third + Second + Third
- One - Two - Three + One + Two + Three
- First - Second - Third + First + Second + Third
- Update + Update
@@ -265,11 +265,11 @@ export default { options: [ { label: 'One', value: 'one' }, { label: 'Two', value: 'two' }, - { label: 'Three', value: 'three' } + { label: 'Three', value: 'three' }, ], model: 'three', - activePage: 4 + activePage: 4, } - } + }, } diff --git a/src/components/ui/cards/Cards.vue b/src/components/ui/cards/Cards.vue index 064e4d24d..346c61d61 100644 --- a/src/components/ui/cards/Cards.vue +++ b/src/components/ui/cards/Cards.vue @@ -1,135 +1,135 @@ diff --git a/src/components/ui/chips/Chips.vue b/src/components/ui/chips/Chips.vue index d7d5c0ea6..c8c7941dd 100644 --- a/src/components/ui/chips/Chips.vue +++ b/src/components/ui/chips/Chips.vue @@ -94,6 +94,6 @@ diff --git a/src/components/ui/collapse/Collapses.vue b/src/components/ui/collapse/Collapses.vue index d6db8b93c..4a11ef452 100644 --- a/src/components/ui/collapse/Collapses.vue +++ b/src/components/ui/collapse/Collapses.vue @@ -91,6 +91,6 @@ diff --git a/src/components/ui/filters/Filters.vue b/src/components/ui/filters/Filters.vue index e990f5ad4..591921f08 100644 --- a/src/components/ui/filters/Filters.vue +++ b/src/components/ui/filters/Filters.vue @@ -77,18 +77,18 @@ diff --git a/src/components/ui/filters/filtersData.js b/src/components/ui/filters/filtersData.js index c0a78963d..e3ad1ae17 100644 --- a/src/components/ui/filters/filtersData.js +++ b/src/components/ui/filters/filtersData.js @@ -4,42 +4,42 @@ export const itemList = [ name: 'Matthew McCormick', email: 'matthew30@mail.ol', city: 'Vancouver', - score: 93 + score: 93, }, { name: 'Nancy Bo', email: 'nancy@bonweb.com', city: 'Washington', - score: 280 + score: 280, }, { name: 'Frederiko Lopez', email: 'fr.lopez@webmail.sp', city: 'Barcelona', - score: 16 + score: 16, }, { name: 'Stanley Hummer', email: 'mr_winner_2999@gmail.cb', city: 'Manchester', - score: 57 + score: 57, }, { name: 'Lendley Wintz', email: '9938198146@mailster.io', city: 'Wien', - score: 113 + score: 113, }, { name: 'Barbara Noz', email: 'barbaranoz@mailster.io', city: 'Brussels', - score: 68 + score: 68, }, { name: 'ancy Bo', email: 'nancy@boonweb.com', city: 'Washington', - score: 280 - } + score: 280, + }, ] diff --git a/src/components/ui/icons/SetsList.vue b/src/components/ui/icons/SetsList.vue index c61c26bd6..6d7cf0082 100644 --- a/src/components/ui/icons/SetsList.vue +++ b/src/components/ui/icons/SetsList.vue @@ -68,22 +68,22 @@ export default { diff --git a/src/components/ui/modals/Modals.vue b/src/components/ui/modals/Modals.vue index dca088cb1..ca2eefd77 100644 --- a/src/components/ui/modals/Modals.vue +++ b/src/components/ui/modals/Modals.vue @@ -112,7 +112,9 @@ diff --git a/src/components/ui/notifications/Notifications.vue b/src/components/ui/notifications/Notifications.vue index 6ea221692..972aebc29 100644 --- a/src/components/ui/notifications/Notifications.vue +++ b/src/components/ui/notifications/Notifications.vue @@ -12,7 +12,8 @@ + | translate}} +
@@ -20,7 +21,8 @@ + | translate}} +
@@ -28,7 +30,8 @@ + | translate}} +
- - - + + +
diff --git a/src/components/ui/tree-view/TreeViewIconsPreview.vue b/src/components/ui/tree-view/TreeViewIconsPreview.vue index 0814fdd5c..8af50f1eb 100644 --- a/src/components/ui/tree-view/TreeViewIconsPreview.vue +++ b/src/components/ui/tree-view/TreeViewIconsPreview.vue @@ -74,6 +74,6 @@ diff --git a/src/components/ui/typography/Typography.vue b/src/components/ui/typography/Typography.vue index 4dbdb5e1a..0d82c391c 100644 --- a/src/components/ui/typography/Typography.vue +++ b/src/components/ui/typography/Typography.vue @@ -159,6 +159,6 @@ diff --git a/src/router/index.js b/src/router/index.js index 5cc2ac4f8..d539d3d04 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -201,7 +201,7 @@ export default new Router({ component: () => import('../components/ui/icons/SetsList'), meta: { wikiLink: 'https://github.com/epicmaxco/vuestic-admin/wiki/Icons', - } + }, }, { name: 'icon-set', @@ -210,7 +210,7 @@ export default new Router({ props: true, meta: { wikiLink: 'https://github.com/epicmaxco/vuestic-admin/wiki/Icons', - } + }, }, ], }, @@ -270,27 +270,27 @@ export default new Router({ meta: { wikiLink: 'https://github.com/epicmaxco/vuestic-admin/wiki/Collapse', }, - component: () => import('../components/ui/collapse/Collapses') + component: () => import('../components/ui/collapse/Collapses'), }, { name: 'filters', path: 'filters', - component: () => import('../components/ui/filters/Filters') + component: () => import('../components/ui/filters/Filters'), }, { name: 'spacing', path: 'spacing', - component: () => import('../components/ui/spacing/Spacing') + component: () => import('../components/ui/spacing/Spacing'), }, { name: 'sliders', path: 'sliders', component: () => import('../components/ui/sliders/Sliders'), meta: { - wikiLink: 'https://github.com/epicmaxco/vuestic-admin/wiki/Sliders' + wikiLink: 'https://github.com/epicmaxco/vuestic-admin/wiki/Sliders', }, - } - ] + }, + ], }, { name: 'extra', diff --git a/src/router/vueBookRoutes.js b/src/router/vueBookRoutes.js index 7d4ca8ba9..27ad88006 100644 --- a/src/router/vueBookRoutes.js +++ b/src/router/vueBookRoutes.js @@ -1,5 +1,6 @@ import Vue from 'vue' import { createRoute, VueBookComponents } from 'vue-book' + Vue.use(VueBookComponents) export default [ diff --git a/src/services/colors.js b/src/services/colors.js index c354ef01f..e01d295d4 100644 --- a/src/services/colors.js +++ b/src/services/colors.js @@ -5,7 +5,7 @@ const themes = { danger: '#e34b4a', warning: '#ffc202', gray: '#babfc2', - dark: '#34495e' + dark: '#34495e', } export const ColorPlugin = { @@ -19,5 +19,5 @@ export const ColorPlugin = { /* eslint-disable no-new */ new Vue({ data: { themes: Vue.prototype.$themes } }) - } + }, } diff --git a/src/services/utils.js b/src/services/utils.js index 4528d8ecd..5b7a41d47 100644 --- a/src/services/utils.js +++ b/src/services/utils.js @@ -1,37 +1,3 @@ -export default { - hex2rgb (hex, opacity) { - hex = (hex + '').trim() - - let rgb = null - let match = hex.match(/^#?(([0-9a-zA-Z]{3}){1,3})$/) - - if (!match) { - return null - } - - rgb = {} - - hex = match[1] - - if (hex.length === 6) { - rgb.r = parseInt(hex.substring(0, 2), 16) - rgb.g = parseInt(hex.substring(2, 4), 16) - rgb.b = parseInt(hex.substring(4, 6), 16) - } else if (hex.length === 3) { - rgb.r = parseInt(hex.substring(0, 1) + hex.substring(0, 1), 16) - rgb.g = parseInt(hex.substring(1, 2) + hex.substring(1, 2), 16) - rgb.b = parseInt(hex.substring(2, 3) + hex.substring(2, 3), 16) - } - - rgb.css = 'rgb' + (opacity ? 'a' : '') + '(' - rgb.css += rgb.r + ',' + rgb.g + ',' + rgb.b - rgb.css += (opacity ? ',' + opacity : '') + ')' - - return rgb - }, - -} - export const normalizeValue = (value, minValue = 0, maxValue = 100) => { if (value <= minValue) { return minValue diff --git a/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.demo.vue b/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.demo.vue index 25d95d744..13fe7bbcb 100644 --- a/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.demo.vue @@ -11,23 +11,23 @@ - Button 1 - Button 2 - Button 3 + Button 1 + Button 2 + Button 3 - Button 1 - Button 2 - Button 3 + Button 1 + Button 2 + Button 3 - Button 1 - Button 2 - Button 3 + Button 1 + Button 2 + Button 3 @@ -37,44 +37,44 @@ - Button 1 - Button 2 - Button 3 - Button 4 + Button 1 + Button 2 + Button 3 + Button 4 - Button 1 - Button 2 - Button 3 - Button 4 + Button 1 + Button 2 + Button 3 + Button 4 - Button 1 - Button 2 - Button 3 - Button 4 + Button 1 + Button 2 + Button 3 + Button 4 - Button 1 - Button 2 - Button 3 - Button 4 + Button 1 + Button 2 + Button 3 + Button 4 - Button 1 - Button 2 - Button 3 - Button 4 + Button 1 + Button 2 + Button 3 + Button 4 - Button 1 - Button 2 - Button 3 - Button 4 + Button 1 + Button 2 + Button 3 + Button 4 @@ -160,33 +160,33 @@ First - Second - Third + Second + Third - First - Second - Third + First + Second + Third - Update + Update - One - Two - Three + One + Two + Three - First - Second - Third + First + Second + Third @@ -199,9 +199,10 @@ diff --git a/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.vue b/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.vue index 56dfb0d41..386b42713 100644 --- a/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.vue +++ b/src/vuestic-theme/vuestic-components/va-button-group/VaButtonGroup.vue @@ -6,29 +6,29 @@ diff --git a/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.demo.vue b/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.demo.vue index 23546b4b2..3bc3cbd32 100644 --- a/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.demo.vue @@ -92,16 +92,16 @@ import VaButtonToggle from './VaButtonToggle' export default { components: { - VaButtonToggle + VaButtonToggle, }, data () { return { options: [ { label: 'One', value: 'one' }, { label: 'Two', value: 'two' }, - { label: 'Three', value: 'three' } + { label: 'Three', value: 'three' }, ], - model: 'two' + model: 'two', } }, } diff --git a/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.vue b/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.vue index 6edb331a0..b3dca2176 100644 --- a/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.vue +++ b/src/vuestic-theme/vuestic-components/va-button-toggle/VaButtonToggle.vue @@ -20,40 +20,38 @@ diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.demo.vue b/src/vuestic-theme/vuestic-components/va-button/VaButton.demo.vue index adba3b03f..36d19e392 100644 --- a/src/vuestic-theme/vuestic-components/va-button/VaButton.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-button/VaButton.demo.vue @@ -280,9 +280,10 @@ diff --git a/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js b/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js index 759329837..76cfcd324 100644 --- a/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js +++ b/src/vuestic-theme/vuestic-components/va-button/VaButton.spec.js @@ -21,7 +21,7 @@ describe('VaButton', () => { it('large button', () => { const wrapper = shallowMount(VaButton, { - propsData: { large: true } + propsData: { large: true }, }) expect(wrapper.find(VaButton).classes()).toContain('va-button--large') expect(wrapper.html()).toMatchSnapshot() @@ -29,7 +29,7 @@ describe('VaButton', () => { it('small button', () => { const wrapper = shallowMount(VaButton, { - propsData: { small: true } + propsData: { small: true }, }) expect(wrapper.find(VaButton).classes()).toContain('va-button--small') expect(wrapper.html()).toMatchSnapshot() @@ -46,8 +46,8 @@ describe('VaButton', () => { it('a button with defined href', () => { const wrapper = shallowMount(VaButton, { propsData: { - href: 'http://epic-spinners.epicmax.co/' - } + href: 'http://epic-spinners.epicmax.co/', + }, }) expect(wrapper.is('a')).toBe(true) }) @@ -55,8 +55,8 @@ describe('VaButton', () => { it('a button with defined target', () => { const wrapper = shallowMount(VaButton, { propsData: { - target: '_blank' - } + target: '_blank', + }, }) expect(wrapper.is('a')).toBe(true) }) @@ -65,8 +65,8 @@ describe('VaButton', () => { const wrapper = shallowMount(VaButton, { propsData: { href: 'http://epic-spinners.epicmax.co/', - target: '_blank' - } + target: '_blank', + }, }) expect(wrapper.html()).toMatchSnapshot() }) @@ -74,11 +74,11 @@ describe('VaButton', () => { it('router-link button with defined to property', () => { const wrapper = shallowMount(VaButton, { propsData: { - to: { name: 'charts' } + to: { name: 'charts' }, }, stubs: { - RouterLink: RouterLinkStub - } + RouterLink: RouterLinkStub, + }, }) expect(wrapper.html()).toMatchSnapshot() }) @@ -87,11 +87,11 @@ describe('VaButton', () => { const wrapper = shallowMount(VaButton, { propsData: { to: { name: 'charts' }, - activeClass: 'va-button--active' + activeClass: 'va-button--active', }, stubs: { - RouterLink: RouterLinkStub - } + RouterLink: RouterLinkStub, + }, }) expect(wrapper.html()).toMatchSnapshot() }) @@ -100,7 +100,7 @@ describe('VaButton', () => { it('disabled button', () => { const wrapper = shallowMount(VaButton, { - propsData: { disabled: true } + propsData: { disabled: true }, }) expect(wrapper.find(VaButton).classes()).toContain('va-button--disabled') @@ -112,27 +112,29 @@ describe('VaButton', () => { it('button with left icon', () => { const wrapper = shallowMount(VaButton, { propsData: { - icon: 'brandico brandico-facebook' - } + icon: 'brandico brandico-facebook', + }, }) - expect(wrapper.find(VaButton).classes()).toContain('va-button--with-left-icon') + expect(wrapper.find(VaButton).classes()) + .toContain('va-button--with-left-icon') }) it('button with right icon', () => { const wrapper = shallowMount(VaButton, { propsData: { - iconRight: 'iconicstroke iconicstroke-info' - } + iconRight: 'iconicstroke iconicstroke-info', + }, }) - expect(wrapper.find(VaButton).classes()).toContain('va-button--with-right-icon') + expect(wrapper.find(VaButton).classes()) + .toContain('va-button--with-right-icon') }) it('button with both icons', () => { const wrapper = shallowMount(VaButton, { propsData: { icon: 'brandico brandico-facebook', - iconRight: 'iconicstroke iconicstroke-info' - } + iconRight: 'iconicstroke iconicstroke-info', + }, }) expect(wrapper.html()).toMatchSnapshot() }) diff --git a/src/vuestic-theme/vuestic-components/va-card/VaCard.demo.vue b/src/vuestic-theme/vuestic-components/va-card/VaCard.demo.vue index a19680736..9dba38ad9 100644 --- a/src/vuestic-theme/vuestic-components/va-card/VaCard.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-card/VaCard.demo.vue @@ -36,8 +36,8 @@ title="Default Card with controls" > The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project @@ -52,7 +52,7 @@ title="Custom header" > The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project @@ -68,8 +68,8 @@ title="Default Card with long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long text" > The unique stripes of zebras make them one of the animals most familiar to people. They occur in a variety of habitats, such as grasslands, savannas, woodlands, thorny scrublands, mountains, and coastal hills. Various anthropogenic factors have had a severe impact on zebra populations, in particular hunting for skins and habitat destruction. Grévy's zebra and the mountain zebra are endangered. While plains zebras are much more plentiful, one subspecies, the quagga, became extinct in the late 19th century – though there is currently a plan, called the Quagga Project @@ -195,17 +195,18 @@ import VaCard from './VaCard' export default { components: { VaCard, - } + }, } diff --git a/src/vuestic-theme/vuestic-components/va-card/VaCard.vue b/src/vuestic-theme/vuestic-components/va-card/VaCard.vue index 410270970..70b335d1b 100644 --- a/src/vuestic-theme/vuestic-components/va-card/VaCard.vue +++ b/src/vuestic-theme/vuestic-components/va-card/VaCard.vue @@ -24,7 +24,7 @@ {{ title }}
- +
@@ -80,8 +80,8 @@ export default { }, color: { type: String, - default: '' - } + default: '', + }, }, computed: { showHeader () { @@ -93,22 +93,22 @@ export default { 'va-card__body--no-padding': this.noPadding, 'va-card__body--padding-top': (!this.showHeader && !this.noPaddingV && !this.noPadding) || - this.titleOnImage + this.titleOnImage, } }, computedStripeStyle () { return { - background: this.$themes[this.stripe] + background: this.$themes[this.stripe], } }, computedCardStyle () { if (this.color) { return { color: '#fff', - background: getGradientBackground(this.$themes[this.color]) + background: getGradientBackground(this.$themes[this.color]), } } - } + }, }, } @@ -202,10 +202,10 @@ export default { &-overlay { position: absolute; top: 0; - left:0; + left: 0; height: 100%; width: 100%; - background-color: rgba(0,0,0,.3); + background-color: rgba(0, 0, 0, .3); pointer-events: none; } } diff --git a/src/vuestic-theme/vuestic-components/va-chip/VaBadge.demo.vue b/src/vuestic-theme/vuestic-components/va-chip/VaBadge.demo.vue index 050b1fe3e..08e00a008 100644 --- a/src/vuestic-theme/vuestic-components/va-chip/VaBadge.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-chip/VaBadge.demo.vue @@ -55,6 +55,6 @@ import VaBadge from './VaBadge' export default { - components: { VaBadge } + components: { VaBadge }, } diff --git a/src/vuestic-theme/vuestic-components/va-chip/VaBadge.vue b/src/vuestic-theme/vuestic-components/va-chip/VaBadge.vue index f15435fab..cccbd3dcc 100644 --- a/src/vuestic-theme/vuestic-components/va-chip/VaBadge.vue +++ b/src/vuestic-theme/vuestic-components/va-chip/VaBadge.vue @@ -19,11 +19,11 @@ export default { name: 'va-badge', props: { outline: { - type: Boolean + type: Boolean, }, color: { type: String, - default: 'success' + default: 'success', }, }, computed: { @@ -38,7 +38,7 @@ export default { borderColor: this.outline ? this.$themes[this.color] : '', backgroundColor: !this.outline ? this.$themes[this.color] : '', } - } + }, }, } @@ -46,30 +46,30 @@ export default { diff --git a/src/vuestic-theme/vuestic-components/va-chip/VaChip.demo.vue b/src/vuestic-theme/vuestic-components/va-chip/VaChip.demo.vue index f0fec0c53..4f6152a17 100644 --- a/src/vuestic-theme/vuestic-components/va-chip/VaChip.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-chip/VaChip.demo.vue @@ -107,6 +107,6 @@ export default { return { isCloseableTagVisible: true, } - } + }, } diff --git a/src/vuestic-theme/vuestic-components/va-chip/VaChip.vue b/src/vuestic-theme/vuestic-components/va-chip/VaChip.vue index e1c3bd675..d793729eb 100644 --- a/src/vuestic-theme/vuestic-components/va-chip/VaChip.vue +++ b/src/vuestic-theme/vuestic-components/va-chip/VaChip.vue @@ -36,7 +36,11 @@ diff --git a/src/vuestic-theme/vuestic-components/va-collapse/VaCollapse.vue b/src/vuestic-theme/vuestic-components/va-collapse/VaCollapse.vue index a9dee6c02..ea893674d 100644 --- a/src/vuestic-theme/vuestic-components/va-collapse/VaCollapse.vue +++ b/src/vuestic-theme/vuestic-components/va-collapse/VaCollapse.vue @@ -36,15 +36,16 @@ @@ -108,6 +109,7 @@ export default { & + & { margin-top: 1.5rem; } + &__body { height: 0; transition: ease-in 0.3s; @@ -123,6 +125,7 @@ export default { } } } + &__header { &__content { display: flex; @@ -136,6 +139,7 @@ export default { padding-bottom: 0.75rem; padding-left: 1rem; } + &__icon { @include flex-center(); min-width: 1.5rem; diff --git a/src/vuestic-theme/vuestic-components/va-icon/VaIcon.demo.vue b/src/vuestic-theme/vuestic-components/va-icon/VaIcon.demo.vue index 92710f06b..70018f8d4 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/VaIcon.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/VaIcon.demo.vue @@ -71,9 +71,10 @@ diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconCleanCode.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconCleanCode.vue index 36eb4fd59..3c05b38b4 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconCleanCode.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconCleanCode.vue @@ -31,9 +31,11 @@ export default { display: inline-block; width: 56px; height: 50px; + .cls-1 { fill: #4ae387; } + .cls-2 { fill: #34495e; } diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFree.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFree.vue index 28479bc4a..dabe16e83 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFree.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFree.vue @@ -28,15 +28,18 @@ export default { display: inline-block; width: 55px; height: 47.8px; + .cls-1 { fill: #4ae387; } + .cls-2 { fill: none; stroke: #34495e; stroke-miterlimit: 10; stroke-width: 3px; } + .cls-3 { fill: #34495e; } diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFresh.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFresh.vue index e11d9b107..3ba0e6ed1 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFresh.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconFresh.vue @@ -25,9 +25,11 @@ export default { display: inline-block; width: 51px; height: 48px; + .cls-1 { fill: #4ae387; } + .cls-2 { fill: #34495e; } diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconResponsive.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconResponsive.vue index b6eb63add..7eb0792b2 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconResponsive.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconResponsive.vue @@ -26,9 +26,11 @@ export default { display: inline-block; width: 47.5px; height: 49px; + .cls-1 { fill: #4ae387; } + .cls-2 { fill: #34495e; } diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconRich.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconRich.vue index b43193f80..624a4987b 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconRich.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconRich.vue @@ -30,9 +30,11 @@ export default { display: inline-block; width: 57px; height: 55px; + .cls-1 { fill: #4ae387; } + .cls-2 { fill: #34495e; } diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVue.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVue.vue index 6c7b65539..6930fee15 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVue.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVue.vue @@ -25,9 +25,11 @@ export default { display: inline-block; width: 55px; height: 47.8px; + .cls-1 { fill: #4ae387; } + .cls-2 { fill: #34495e; } diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.demo.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.demo.vue index 895a50238..b14141654 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.demo.vue @@ -11,7 +11,7 @@ import VaIconVuestic from './VaIconVuestic.vue' export default { components: { - VaIconVuestic + VaIconVuestic, }, } diff --git a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.vue b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.vue index b8692530e..c23aba539 100644 --- a/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.vue +++ b/src/vuestic-theme/vuestic-components/va-icon/va-iconset/VaIconVuestic.vue @@ -27,6 +27,7 @@ export default { display: inline-block; width: 129px; height: 15.4px; + .st0 { fill: #4AE387; } diff --git a/src/vuestic-theme/vuestic-components/va-modal/VaModal.demo.vue b/src/vuestic-theme/vuestic-components/va-modal/VaModal.demo.vue index 33eef816f..47629ea9e 100644 --- a/src/vuestic-theme/vuestic-components/va-modal/VaModal.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-modal/VaModal.demo.vue @@ -1,196 +1,196 @@ diff --git a/src/vuestic-theme/vuestic-components/va-notification/VaNotification.demo.vue b/src/vuestic-theme/vuestic-components/va-notification/VaNotification.demo.vue index 3538e6f71..73bff7338 100644 --- a/src/vuestic-theme/vuestic-components/va-notification/VaNotification.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-notification/VaNotification.demo.vue @@ -2,27 +2,27 @@ - Paid + Paid You successfully read this important alert message. - Info + Info This alert needs your attention, but it's not super important. Longer text. - On Hold + On Hold Better check yourself, you're not looking too good. - Danger + Danger Change a few things up and try submitting again. - Processing + Processing Better check yourself, you're not looking too good. - New Label + New Label Change a few things up and try submitting again. @@ -32,13 +32,13 @@ v-model="isCloseableNotificationVisible" /> - Paid + Paid You successfully read this important alert message. - Paid + Paid You successfully read this important alert message. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. Long. diff --git a/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue b/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue index fdbe41089..8621c97ab 100644 --- a/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue +++ b/src/vuestic-theme/vuestic-components/va-notification/VaNotification.vue @@ -8,10 +8,10 @@
@@ -19,7 +19,10 @@ diff --git a/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.demo.vue b/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.demo.vue index dff20629b..77953039a 100644 --- a/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.demo.vue @@ -106,12 +106,12 @@ import VaPagination from './VaPagination' export default { components: { - VaPagination + VaPagination, }, data () { return { - activePage: 4 + activePage: 4, } - } + }, } diff --git a/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue b/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue index 9e3acd2b7..53bb5abe9 100644 --- a/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue +++ b/src/vuestic-theme/vuestic-components/va-pagination/VaPagination.vue @@ -72,32 +72,32 @@ export default { }, visiblePages: { type: Number, - default: 5 + default: 5, }, pages: { type: Number, - required: true + required: true, }, color: { type: String, - default: 'info' + default: 'info', }, disabled: { - type: Boolean + type: Boolean, }, small: { - type: Boolean + type: Boolean, }, large: { - type: Boolean + type: Boolean, }, boundaryLinks: { type: Boolean, - default: true + default: true, }, directionLinks: { type: Boolean, - default: true + default: true, }, icon: { type: Object, @@ -129,7 +129,7 @@ export default { return { backgroundColor: 'transparent', borderColor: this.disabled ? '#babfc2' : '', - opacity: 1 + opacity: 1, } }, iconClass () { @@ -143,7 +143,7 @@ export default { }, paginationRange () { return setPaginationRange(this.value, this.visiblePages, this.pages) - } + }, }, methods: { changePage (pageNum) { @@ -158,33 +158,33 @@ export default { backgroundColor: this.disabled ? '#babfc2' : this.$themes[this.toggleColor ? this.toggleColor : this.color], borderColor: this.disabled ? '#babfc2' : this.$themes[this.color], opacity: 1, - color: this.disabled ? '#babfc2' : '#ffffff' + color: this.disabled ? '#babfc2' : '#ffffff', } } else { return { backgroundColor: 'transparent', borderColor: this.disabled ? '#babfc2' : this.$themes[this.color], opacity: 1, - color: this.disabled ? '#babfc2' : this.$themes[this.color] + color: this.disabled ? '#babfc2' : this.$themes[this.color], } } }, - } + }, } diff --git a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.demo.vue b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.demo.vue index 936970338..2d27115b2 100644 --- a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.demo.vue @@ -46,13 +46,13 @@ import VaProgressBar from './VaProgressBar' export default { components: { - VaProgressBar + VaProgressBar, }, data () { return { bufferValue: 45, value: 35, } - } + }, } diff --git a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.vue b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.vue index 8476b53ce..fef31c465 100644 --- a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.vue +++ b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressBar.vue @@ -37,8 +37,8 @@ export default { props: { buffer: { type: Number, - default: 100 - } + default: 100, + }, }, computed: { normalizedBuffer () { @@ -47,8 +47,8 @@ export default { } return normalizeValue(this.buffer) - } - } + }, + }, } @@ -92,14 +92,15 @@ export default { height: inherit; border-radius: inherit; transition: width ease 2s; + &__indeterminate-start { animation: va-progress-bar__overlay__indeterminate-start 2s ease-in infinite; position: absolute; height: inherit; } + &__indeterminate-end { - animation: va-progress-bar__overlay__indeterminate-end 2s ease-out 1s - infinite; + animation: va-progress-bar__overlay__indeterminate-end 2s ease-out 1s infinite; position: absolute; height: inherit; } diff --git a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.demo.vue b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.demo.vue index 7162ff5d1..12aa7a006 100644 --- a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.demo.vue @@ -55,12 +55,12 @@ import VaProgressCircle from './VaProgressCircle' export default { components: { - VaProgressCircle + VaProgressCircle, }, data () { return { - value: 35 + value: 35, } - } + }, } diff --git a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.vue b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.vue index 09df1b7d1..fc9ee79db 100644 --- a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.vue +++ b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/VaProgressCircle.vue @@ -42,8 +42,8 @@ export default { }, dashoffset () { return this.dasharray * (1 - this.normalizedValue / 100) - } - } + }, + }, } diff --git a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/progressMixin.js b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/progressMixin.js index eeb8d966e..6f41f8653 100644 --- a/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/progressMixin.js +++ b/src/vuestic-theme/vuestic-components/va-progress-bar/progress-types/progressMixin.js @@ -4,21 +4,21 @@ export const progressMixin = { props: { value: { type: Number, - default: 0 + default: 0, }, color: { type: String, - default: 'success' + default: 'success', }, // If 'indeterminate' is 'true' 'value' prop will be ignored. indeterminate: { type: Boolean, - default: false - } + default: false, + }, }, computed: { normalizedValue () { return normalizeValue(this.value) }, - } + }, } diff --git a/src/vuestic-theme/vuestic-components/va-slider/VaSlider.demo.vue b/src/vuestic-theme/vuestic-components/va-slider/VaSlider.demo.vue index 637d5d791..11af9255b 100644 --- a/src/vuestic-theme/vuestic-components/va-slider/VaSlider.demo.vue +++ b/src/vuestic-theme/vuestic-components/va-slider/VaSlider.demo.vue @@ -206,7 +206,7 @@ export default { value3: 1500, value4: [1100, 1320], min: 1000, - max: 2000 + max: 2000, } }, } diff --git a/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue b/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue index 5e7174213..5c4be4627 100644 --- a/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue +++ b/src/vuestic-theme/vuestic-components/va-slider/VaSlider.vue @@ -153,29 +153,29 @@ export default { type: Boolean, }, value: { - type: [Number, Array] + type: [Number, Array], }, labelValue: { - type: String + type: String, }, valueVisible: { type: Boolean, }, min: { type: Number, - default: 0 + default: 0, }, max: { type: Number, - default: 100 + default: 100, }, step: { type: Number, - default: 1 + default: 1, }, color: { type: String, - default: 'success' + default: 'success', }, label: { type: String, @@ -184,10 +184,10 @@ export default { type: Boolean, }, disabled: { - type: [Boolean, Array] + type: [Boolean, Array], }, pins: { - type: Boolean + type: Boolean, }, icon: { type: String, @@ -196,7 +196,7 @@ export default { type: String, }, withInput: { - type: Boolean + type: Boolean, }, }, data () { @@ -205,23 +205,23 @@ export default { size: 0, currentValue: this.value, currentSlider: 0, - isComponentExists: false + isComponentExists: false, } }, computed: { sliderClass () { return { - 'va-slider--disabled': this.disabled + 'va-slider--disabled': this.disabled, } }, labelStyles () { return { - color: this.$themes[this.color] + color: this.$themes[this.color], } }, trackStyles () { return { - backgroundColor: getHoverColor(this.$themes[this.color]) + backgroundColor: getHoverColor(this.$themes[this.color]), } }, processedStyles () { @@ -234,14 +234,14 @@ export default { return { left: `${val0}%`, width: `${val1 - val0}%`, - backgroundColor: this.$themes[this.color] + backgroundColor: this.$themes[this.color], } } else { const val = ((validatedValue - this.min) / (this.max - this.min)) * 100 return { width: `${val}%`, - backgroundColor: this.$themes[this.color] + backgroundColor: this.$themes[this.color], } } }, @@ -256,13 +256,13 @@ export default { { left: `calc(${val0}% - 8px)`, backgroundColor: this.color, - borderColor: this.$themes[this.color] + borderColor: this.$themes[this.color], }, { left: `calc(${val1}% - 8px)`, backgroundColor: this.color, - borderColor: this.$themes[this.color] - } + borderColor: this.$themes[this.color], + }, ] } else { const val = ((validatedValue - this.min) / (this.max - this.min)) * 100 @@ -270,7 +270,7 @@ export default { return { left: `calc(${val}% - 8px)`, backgroundColor: this.color, - borderColor: this.$themes[this.color] + borderColor: this.$themes[this.color], } } }, @@ -283,7 +283,7 @@ export default { val = this.limitValue(val) } this.$emit('input', val) - } + }, }, total () { return (this.max - this.min) / this.step @@ -312,7 +312,7 @@ export default { }, isRange () { return Array.isArray(this.value) - } + }, }, watch: { val (val) { @@ -327,7 +327,7 @@ export default { if (val > this.max) { validateSlider(this.value, this.step, this.min, val) } - } + }, }, methods: { bindEvents () { @@ -350,7 +350,7 @@ export default { }, moving (e) { if (!this.disabled) { - if (!this.flag) return false + if (!this.flag) { return false } e.preventDefault() this.setValueOnPos(this.getPos(e)) @@ -509,7 +509,7 @@ export default { return a.some((v, i) => v !== b[i]) } return a !== b - } + }, }, mounted () { this.$nextTick(() => { @@ -521,77 +521,77 @@ export default { }, beforeDestroy () { this.unbindEvents() - } + }, } diff --git a/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue b/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue index e7899416b..d9efd82a2 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-chat/VuesticChat.vue @@ -17,7 +17,8 @@
- + +
Send diff --git a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VaCheckbox.spec.js b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VaCheckbox.spec.js index 078df1f20..2bef88792 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VaCheckbox.spec.js +++ b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VaCheckbox.spec.js @@ -4,13 +4,13 @@ import VaCheckbox from './VuesticCheckbox' describe('VaCheckbox', () => { it('default', () => { const wrapper = shallowMount(VaCheckbox, { - propsData: { value: false } + propsData: { value: false }, }) expect(wrapper.html()).toMatchSnapshot() }) it('true value', () => { const wrapper = shallowMount(VaCheckbox, { - propsData: { value: true } + propsData: { value: true }, }) expect(wrapper.html()).toMatchSnapshot() }) diff --git a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.demo.vue b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.demo.vue index e58c3271f..06962924a 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.demo.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.demo.vue @@ -3,7 +3,7 @@
- Selected + Selected
@@ -21,13 +21,13 @@ import VuesticCheckbox from './VuesticCheckbox' export default { components: { - VuesticCheckbox + VuesticCheckbox, }, data () { return { value: true, - errorMessages: ['error message 1', 'error message 2'] + errorMessages: ['error message 1', 'error message 2'], } - } + }, } diff --git a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue index 850363a2a..1838b6998 100755 --- a/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-checkbox/VuesticCheckbox.vue @@ -49,10 +49,10 @@ export default { label: String, value: { type: Boolean, - required: true + required: true, }, id: { - type: String + type: String, }, disabled: { type: Boolean, @@ -64,21 +64,21 @@ export default { }, errorMessages: { type: [String, Array], - default: () => [] + default: () => [], }, errorCount: { type: Number, - default: 1 + default: 1, }, name: String, error: { type: Boolean, - default: false - } + default: false, + }, }, data () { return { - isFocused: false + isFocused: false, } }, computed: { @@ -88,7 +88,7 @@ export default { 'vuestic-checkbox--readonly': this.readonly, 'vuestic-checkbox--disabled': this.disabled, 'vuestic-checkbox--error': this.showError, - 'vuestic-checkbox--onfocus': this.focused + 'vuestic-checkbox--onfocus': this.focused, } }, computedErrorMessages () { @@ -108,7 +108,7 @@ export default { }, get () { return this.isFocused - } + }, }, valueProxy: { set (valueProxy) { @@ -118,7 +118,7 @@ export default { }, get () { return this.value - } + }, }, showError () { // We make error active, if the error-message is not empty and checkbox is not disabled @@ -147,6 +147,7 @@ export default { margin-bottom: $checkbox-between-items-margin; display: flex; flex-direction: column; + #{&}__input { cursor: pointer; height: 1.375rem; @@ -166,7 +167,10 @@ export default { background-color: $vue-green; border: 0; } - .vuestic-checkbox--readonly#{&} {} + + .vuestic-checkbox--readonly#{&} { + } + .vuestic-checkbox--disabled#{&} { border-color: $lighter-gray; cursor: initial; @@ -176,11 +180,13 @@ export default { } } } + .vuestic-checkbox--error#{&} { border-color: $theme-red; } } } + #{&}__label-text { display: inline-block; position: relative; @@ -193,24 +199,29 @@ export default { } } } + &__error-message { - display:inline-block; - vertical-align:middle; + display: inline-block; + vertical-align: middle; color: $theme-red; font-size: $font-size-mini; } + &__icon-selected { position: absolute; color: $white; } + &__error-message-container { margin-left: 0.3rem; // we need to move container because of square container, which we use because of onFocus display: flex; flex-direction: column; } + &__label-container { margin-left: 2rem; } + #{&}__square { display: flex; align-items: center; @@ -223,16 +234,19 @@ export default { .vuestic-checkbox--disabled#{&} { cursor: initial; } + .vuestic-checkbox--onfocus#{&} { background-color: $light-gray; transition: all, 0.6s, ease-in; border-radius: 5rem; + &.active { background-color: $lighter-green; } } } } + &__content { flex-direction: row; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticAdvancedColorPicker.vue b/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticAdvancedColorPicker.vue index 93dd8639b..987ca9b25 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticAdvancedColorPicker.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticAdvancedColorPicker.vue @@ -33,9 +33,11 @@ export default { .vc-chrome-alpha-wrap { display: none; } + .vc-chrome-hue-wrap { margin-top: 10px; } + .vc-chrome-toggle-btn { display: none; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticColorInput.vue b/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticColorInput.vue index 64db2d8e7..2c437983c 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticColorInput.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-color-picker/VuesticColorInput.vue @@ -65,6 +65,7 @@ export default { diff --git a/src/vuestic-theme/vuestic-components/vuestic-color-presentation/colorsData.js b/src/vuestic-theme/vuestic-components/vuestic-color-presentation/colorsData.js index 15ef10ec3..fbdf93181 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-color-presentation/colorsData.js +++ b/src/vuestic-theme/vuestic-components/vuestic-color-presentation/colorsData.js @@ -1,28 +1,100 @@ export const mainThemeColors = [ - { color: '#40e583', name: 'Primary & success', description: 'Buttons, labels, graphs.' }, + { + color: '#40e583', + name: 'Primary & success', + description: 'Buttons, labels, graphs.', + }, { color: '#2c82e0', name: 'Info', description: 'Buttons, labels, graphs.' }, { color: '#e34b4a', name: 'Error', description: 'Buttons, labels, graphs.' }, - { color: '#ffc200', name: 'Warning', description: 'Buttons, labels, graphs.' }, - { color: '#34495e', name: 'Black', description: 'Text, buttons, labels, graphs.' }, - { color: '#babfc2', name: 'Secondary', description: 'Light text, buttons, labels, graphs.' }, + { + color: '#ffc200', + name: 'Warning', + description: 'Buttons, labels, graphs.', + }, + { + color: '#34495e', + name: 'Black', + description: 'Text, buttons, labels, graphs.', + }, + { + color: '#babfc2', + name: 'Secondary', + description: 'Light text, buttons, labels, graphs.', + }, { color: '#f5f8f9', name: 'Pale', description: 'Default table bg.' }, - { color: '#d6ffd3', name: 'Light Primary & Success', description: 'Table bg, notifications, text buttons.' }, - { color: '#caeeff', name: 'Light Info', description: 'Table bg, notifications, text buttons.' }, - { color: '#ffebeb', name: 'Light Error', description: 'Table bg, notifications, text buttons.' }, - { color: '#fff3d1', name: 'Light Warning', description: 'Table bg, notifications, text buttons.' }, - { color: '#afb6bb', name: 'Light Black', description: 'Table bg, notifications, text buttons.' }, - { color: '#e6e9ec', name: 'Light Secondary', description: 'Table bg, notifications, text buttons, dividers.' } + { + color: '#d6ffd3', + name: 'Light Primary & Success', + description: 'Table bg, notifications, text buttons.', + }, + { + color: '#caeeff', + name: 'Light Info', + description: 'Table bg, notifications, text buttons.', + }, + { + color: '#ffebeb', + name: 'Light Error', + description: 'Table bg, notifications, text buttons.', + }, + { + color: '#fff3d1', + name: 'Light Warning', + description: 'Table bg, notifications, text buttons.', + }, + { + color: '#afb6bb', + name: 'Light Black', + description: 'Table bg, notifications, text buttons.', + }, + { + color: '#e6e9ec', + name: 'Light Secondary', + description: 'Table bg, notifications, text buttons, dividers.', + }, ] export const extraColors = [ - { color: '#36e9f6', name: 'Teal', description: 'Graphs, tables, labels, etc.' }, - { color: '#ed34b8', name: 'Violet', description: 'Graphs, tables, labels, etc.' }, - { color: '#8f4ed6', name: 'Purple', description: 'Graphs, tables, labels, etc.' }, - { color: '#d40d52', name: 'Ruby', description: 'Graphs, tables, labels, etc.' }, - { color: '#ff842b', name: 'Orrange', description: 'Graphs, tables, labels, etc.' }, - { color: '#1b9a7c', name: 'Dark Green', description: 'Graphs, tables, labels, etc.' }, - { color: '#d3ff00', name: 'Toxic', description: 'Graphs, tables, labels, etc.' }, - { color: '#81513e', name: 'Brown', description: 'Graphs, tables, labels, etc.' }, + { + color: '#36e9f6', + name: 'Teal', + description: 'Graphs, tables, labels, etc.', + }, + { + color: '#ed34b8', + name: 'Violet', + description: 'Graphs, tables, labels, etc.', + }, + { + color: '#8f4ed6', + name: 'Purple', + description: 'Graphs, tables, labels, etc.', + }, + { + color: '#d40d52', + name: 'Ruby', + description: 'Graphs, tables, labels, etc.', + }, + { + color: '#ff842b', + name: 'Orrange', + description: 'Graphs, tables, labels, etc.', + }, + { + color: '#1b9a7c', + name: 'Dark Green', + description: 'Graphs, tables, labels, etc.', + }, + { + color: '#d3ff00', + name: 'Toxic', + description: 'Graphs, tables, labels, etc.', + }, + { + color: '#81513e', + name: 'Brown', + description: 'Graphs, tables, labels, etc.', + }, ] export const buttonGradients = [ diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue index ffdb49013..95331e754 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-datatable/VuesticDataTable.vue @@ -88,11 +88,11 @@ export default { }, paginationOn: { type: Boolean, - default: true + default: true, }, onFilterCustom: { type: String, - default: null + default: null, }, httpFetch: { type: Function, @@ -189,7 +189,7 @@ export default { watch: { onFilterCustom: function (val) { this.onFilterSet(val) - } + }, }, computed: { controlsAlignmentClass () { diff --git a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue index 68e433ab4..be6b4ad28 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-datatable/datatable-components/FilterBar.vue @@ -4,7 +4,8 @@ - + +
@@ -16,7 +17,7 @@ export default { label: { type: String, }, - value: '' + value: '', }, data () { return {} @@ -30,8 +31,8 @@ export default { set (value) { this.$emit('input', value) }, - } - } + }, + }, } @@ -39,9 +40,11 @@ export default { .search-icon { transform: rotate(90deg); } + .form-group { min-width: 7rem; } + @media (max-width: 768px) { .form-group { width: 80%; diff --git a/src/vuestic-theme/vuestic-components/vuestic-date-picker/VuesticDatePicker.vue b/src/vuestic-theme/vuestic-components/vuestic-date-picker/VuesticDatePicker.vue index fc7b8b402..1c37416b1 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-date-picker/VuesticDatePicker.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-date-picker/VuesticDatePicker.vue @@ -79,6 +79,7 @@ $daySize: 1.75rem; content: none; border-bottom-color: $datepickerBackground; } + &:after { content: none; border-bottom-color: $datepickerBackground; @@ -90,6 +91,7 @@ $daySize: 1.75rem; content: none; border-top-color: $datepickerBackground; } + &:after { content: none; border-top-color: $datepickerBackground; @@ -100,11 +102,13 @@ $daySize: 1.75rem; width: $daySize * 7 + $dayPadding * 6 + $borderPadding * 2 !important; padding: 0 $borderPadding $borderPadding; display: block; + .dayContainer { width: ($daySize + $dayPadding) * 7; max-width: ($daySize + $dayPadding) * 7; min-width: ($daySize + $dayPadding) * 7; margin: -$dayPadding / 2; + .flatpickr-day { height: $daySize; line-height: 1.7; @@ -113,34 +117,44 @@ $daySize: 1.75rem; margin: $dayPadding / 2; border: none; color: $datepickerText; + &.today { color: $datepickerActive; + &.selected { color: $datepickerText; } } + &:hover { background-color: $datepickerDayHover; } + &.selected { background-color: $datepickerActive; } + &.nextMonthDay, &.prevMonthDay { color: $datepickerOtherMonth; } + &.disabled { color: $datepickerOtherMonth; + &:hover { background-color: inherit; } } + &.startRange, &.endRange, &.inRange { border-radius: 2rem; box-shadow: none; } + &.startRange, &.endRange { background-color: $datepickerActive; } + &.inRange { background-color: $datepickerDayRange; } @@ -151,18 +165,23 @@ $daySize: 1.75rem; .flatpickr-months { height: 2.625rem; border-bottom: solid 0.125rem $datepickerSeparatorColor; + .flatpickr-month { height: 100%; + .flatpickr-current-month { padding-top: 0.625rem; color: $datepickerText; + .cur-month { font-size: 1rem; font-weight: inherit; } + .cur-year { font-size: 1rem; } + .numInputWrapper { .numInput.cur-year { color: $white; @@ -174,16 +193,19 @@ $daySize: 1.75rem; border-bottom-color: $datepickerActive; } } + &::after { border-bottom-color: $datepickerText; } } + .arrowDown { &:hover { &::after { border-top-color: $datepickerActive; } } + &::after { border-top-color: $datepickerText; } @@ -198,6 +220,7 @@ $daySize: 1.75rem; @include va-flex-center(); padding: 0; color: $datepickerText; + &:hover { color: $datepickerActive; } @@ -206,8 +229,10 @@ $daySize: 1.75rem; .flatpickr-weekdays { padding: 0 $borderPadding; + .flatpickr-weekdaycontainer { justify-content: space-between; + .flatpickr-weekday { letter-spacing: 0.0625rem; flex: 0 0 $daySize; @@ -227,10 +252,12 @@ $daySize: 1.75rem; font-weight: bold; font-size: 0.6875rem; } + .flatpickr-weeks { box-shadow: 2px 0 0 $datepickerSeparatorColor; padding-bottom: $borderPadding; margin-top: -$dayPadding; + .flatpickr-day { height: $daySize; line-height: 1.7; @@ -249,34 +276,43 @@ $daySize: 1.75rem; &:hover { background-color: $datepickerDayHover; } + .numInput { color: $datepickerText; + &:hover, &:focus { background: $datepickerDayHover; } } + .arrowUp { &::after { border-bottom-color: $datepickerText; } + &:hover::after { border-bottom-color: $datepickerActive; } } + .arrowDown { &::after { border-top-color: $datepickerText; } + &:hover::after { border-top-color: $datepickerActive; } } } + .flatpickr-time-separator { color: $datepickerText; } + .flatpickr-am-pm { color: $datepickerText; + &:hover { background-color: $datepickerDayHover; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-feed/VuesticFeed.vue b/src/vuestic-theme/vuestic-components/vuestic-feed/VuesticFeed.vue index 233e91f52..cce5f39d7 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-feed/VuesticFeed.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-feed/VuesticFeed.vue @@ -50,17 +50,21 @@ export default { display: flex; flex-direction: column; justify-content: center; + .empty { text-align: center; } + .post { display: flex; justify-content: space-between; align-items: center; + .photo-container { margin-right: 1rem; border-radius: 50%; border: 2px solid $lighter-gray; + .photo { background-size: cover !important; width: 3rem; @@ -68,6 +72,7 @@ export default { border-radius: 50%; } } + .underscored { width: 100%; display: flex; @@ -77,21 +82,26 @@ export default { overflow: hidden; padding-right: 0.7rem; height: 3.5rem; + .text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + .name { font-weight: $font-weight-bold; } } + .close-btn { margin-left: 1rem; + i { left: 10.5px; } } } + &.last { .underscored { border-bottom: none; diff --git a/src/vuestic-theme/vuestic-components/vuestic-grid/SpacingPlaygroud.vue b/src/vuestic-theme/vuestic-components/vuestic-grid/SpacingPlaygroud.vue index 1da7ea6ce..7ad4f7c2f 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-grid/SpacingPlaygroud.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-grid/SpacingPlaygroud.vue @@ -5,16 +5,20 @@
- m + m +
- - + - +
- p + p +
- - + - +
@@ -43,7 +47,8 @@ @@ -77,9 +82,11 @@ export default { .spacing-playground { .playground-component { background-color: #ffd093; + &__padding { background-color: #c9f7db; } + &__inner { background-color: white; border: 1px solid rgba(0, 0, 0, 0.2); diff --git a/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/Grid.js b/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/Grid.js index cab258c3e..3ff6a0395 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/Grid.js +++ b/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/Grid.js @@ -7,8 +7,8 @@ export default function Grid (name) { id: String, tag: { type: String, - default: 'div' - } + default: 'div', + }, }, render: (h, { props, data, children }) => { data.staticClass = (`${name} ${data.staticClass || ''}`).trim() @@ -17,13 +17,13 @@ export default function Grid (name) { const classes = Object.keys(data.attrs).filter(key => { // TODO: Remove once resolved // https://github.com/vuejs/vue/issues/7841 - if (key === 'slot') return false + if (key === 'slot') { return false } const value = data.attrs[key] return value || typeof value === 'string' }) - if (classes.length) data.staticClass += ` ${classes.join(' ')}` + if (classes.length) { data.staticClass += ` ${classes.join(' ')}` } delete data.attrs } @@ -33,6 +33,6 @@ export default function Grid (name) { } return h(props.tag, data, children) - } + }, } } diff --git a/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/index.js b/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/index.js index 344941ce5..7f45e156f 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/index.js +++ b/src/vuestic-theme/vuestic-components/vuestic-grid/VGrid/index.js @@ -13,5 +13,5 @@ export default { Container, Flex, Layout, - } + }, } diff --git a/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-global-styles.scss b/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-global-styles.scss index 433733536..6f89be1a8 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-global-styles.scss +++ b/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-global-styles.scss @@ -1,9 +1,7 @@ // Also see material design material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints - @import "grid-variables"; // Mixins are reserved for "smart stuffs", flex one-liners are kept intact @import "grid-mixins"; - @import "grid-spacing"; .va-layout { @@ -56,6 +54,7 @@ .va-row { @include va-layout(); + &.row { flex-direction: row; diff --git a/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-spacing.scss b/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-spacing.scss index eddd3f039..7fbc5f551 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-spacing.scss +++ b/src/vuestic-theme/vuestic-components/vuestic-grid/_grid-spacing.scss @@ -23,22 +23,22 @@ } .#{$abbrev}t-auto, .#{$abbrev}y-auto, - .#{$abbrev}a-auto{ + .#{$abbrev}a-auto { #{$prop}-top: auto !important; } .#{$abbrev}r-auto, .#{$abbrev}x-auto, - .#{$abbrev}a-auto{ + .#{$abbrev}a-auto { #{$prop}-right: auto !important; } .#{$abbrev}b-auto, .#{$abbrev}y-auto, - .#{$abbrev}a-auto{ + .#{$abbrev}a-auto { #{$prop}-bottom: auto !important; } .#{$abbrev}l-auto, .#{$abbrev}x-auto, - .#{$abbrev}a-auto{ + .#{$abbrev}a-auto { #{$prop}-left: auto !important; } } diff --git a/src/vuestic-theme/vuestic-components/vuestic-layout/VuesticLayout.vue b/src/vuestic-theme/vuestic-components/vuestic-layout/VuesticLayout.vue index e93e76cf9..1b58c62e8 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-layout/VuesticLayout.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-layout/VuesticLayout.vue @@ -76,6 +76,7 @@ $vuestic-preloader-top: calc(50% - 104px / 2); } } } + .made-by-footer { display: flex; justify-content: center; diff --git a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue index 678431d1c..6d61ea5aa 100755 --- a/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-multi-select/VuesticMultiSelect.vue @@ -9,7 +9,8 @@ :class="{'has-value': !!displayValue}" v-bind:value="displayValue" required/> - + + {{ showRequiredError() }} @@ -160,6 +161,7 @@ export default { .dropdown-menu { padding: 0; + .vuestic-scrollbar { max-height: $dropdown-item-height * 4; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-navbar/VuesticNavbar.vue b/src/vuestic-theme/vuestic-components/vuestic-navbar/VuesticNavbar.vue index 35625b362..6f3a667c9 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-navbar/VuesticNavbar.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-navbar/VuesticNavbar.vue @@ -88,6 +88,7 @@ $navbar-dd-item-height: 48px; top: $nav-mobile-brand-top; left: $nav-mobile-brand-left; height: auto; + .navbar-brand { height: $font-size-smaller; padding: 0; @@ -130,6 +131,7 @@ $navbar-dd-item-height: 48px; right: 0; } } + &:after { position: absolute; bottom: -$dropdown-show-b; @@ -182,6 +184,7 @@ $navbar-dd-item-height: 48px; top: $nav-mobile-brand-top; left: $nav-mobile-brand-left; height: auto; + .navbar-brand { height: $font-size-smaller; padding: 0; @@ -192,13 +195,16 @@ $navbar-dd-item-height: 48px; .dropdown.navbar-dropdown { &.show { display: flex; + &:after { bottom: -$dropdown-mobile-show-b; z-index: 2; } + .dropdown-menu { margin-top: $dropdown-mobile-show-b; left: auto; + &.last { right: 0; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-popup/quasar/components/popup/VuesticPopup.vue b/src/vuestic-theme/vuestic-components/vuestic-popup/quasar/components/popup/VuesticPopup.vue index e6c2e7693..8a3880ad3 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-popup/quasar/components/popup/VuesticPopup.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-popup/quasar/components/popup/VuesticPopup.vue @@ -239,6 +239,7 @@ export default { overflow-x: hidden; max-width: 100vw; outline: 0; + > .q-list:only-child { border: none; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-preloader/VuesticPreLoader.vue b/src/vuestic-theme/vuestic-components/vuestic-preloader/VuesticPreLoader.vue index d9242b70e..0a60ac463 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-preloader/VuesticPreLoader.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-preloader/VuesticPreLoader.vue @@ -11,8 +11,7 @@ export default { name: 'vuestic-pre-loader', methods: { getPrevious (index) { - if (index === 0) return this.points.length - 1 - else return index - 1 + if (index === 0) { return this.points.length - 1 } else { return index - 1 } }, getNext (index) { if (index + 1 === this.points.length) { @@ -68,7 +67,7 @@ export default { this.points = this.points.map(point => { return { lighten: 8, - ...point + ...point, } }) for (let i = 1; i <= 7; i++) { diff --git a/src/vuestic-theme/vuestic-components/vuestic-profile-card/VuesticProfileCard.vue b/src/vuestic-theme/vuestic-components/vuestic-profile-card/VuesticProfileCard.vue index df5e0d350..c93ac5e50 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-profile-card/VuesticProfileCard.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-profile-card/VuesticProfileCard.vue @@ -67,6 +67,7 @@ $vuestic-profile-card-photo-diameter: 9.375rem; &:hover { cursor: pointer; + .icon { color: red; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-radio-button/VuesticRadioButton.vue b/src/vuestic-theme/vuestic-components/vuestic-radio-button/VuesticRadioButton.vue index 949f7936a..cd5a9434b 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-radio-button/VuesticRadioButton.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-radio-button/VuesticRadioButton.vue @@ -44,7 +44,7 @@ export default { }, data () { return { - isFocused: false + isFocused: false, } }, computed: { @@ -52,7 +52,7 @@ export default { return { 'vuestic-radio-button--active': this.isActive, 'vuestic-radio-button--disabled': this.disabled, - 'vuestic-radio-button--on-focus': this.focused + 'vuestic-radio-button--on-focus': this.focused, } }, focused: { @@ -63,7 +63,7 @@ export default { }, get () { return this.isFocused - } + }, }, computedLabel () { if (!this.label) { @@ -73,7 +73,7 @@ export default { }, isActive () { return this.value === this.option - } + }, }, methods: { onClick () { @@ -93,6 +93,7 @@ export default { display: flex; flex-direction: row; margin-bottom: $checkbox-between-items-margin; + &__icon { width: 1.4rem; height: 1.4rem; @@ -108,6 +109,7 @@ export default { } } } + &__icon-circle { @at-root { .vuestic-radio-button.vuestic-radio-button--active & { @@ -120,6 +122,7 @@ export default { } } } + &__input { width: 1.375rem; height: 1.375rem; @@ -127,6 +130,7 @@ export default { cursor: pointer; opacity: 0; } + #{&}__content { width: 32px; height: 32px; @@ -138,12 +142,14 @@ export default { background-color: $light-gray; transition: all, 0.6s, ease-in; border-radius: 3rem; + &.active { background-color: $lighter-green; } } } } + &__slot-container { padding-top: $checkbox-label-margin-top; } diff --git a/src/vuestic-theme/vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue b/src/vuestic-theme/vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue index d42ed2d8d..d62d19e6b 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-scrollbar/VuesticScrollbar.vue @@ -164,29 +164,34 @@ export default { background: transparent; transition: all .3s linear; position: relative; + .scrollbar-wrapper { box-shadow: $sidebar-box-shadow; position: relative; overflow: hidden; max-height: 100%; + .track { width: 5px; position: absolute; right: 0; top: 0; height: 100%; + .thumb { transition: height .3s linear, opacity .6s linear; position: absolute; width: 100%; background-color: $vue-green; opacity: 0; + &.active { opacity: .3; } } } } + &:hover { .thumb.active { opacity: 1 !important; diff --git a/src/vuestic-theme/vuestic-components/vuestic-sidebar/VuesticSidebar.vue b/src/vuestic-theme/vuestic-components/vuestic-sidebar/VuesticSidebar.vue index 5bde13856..96636a8c9 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-sidebar/VuesticSidebar.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-sidebar/VuesticSidebar.vue @@ -45,6 +45,7 @@ export default { margin-bottom: 0; list-style: none; padding-left: 0; + li { display: block; padding-left: 0; @@ -72,6 +73,7 @@ export default { opacity: 0; z-index: $min-z-index; } + &.sidebar-hidden + .content-wrap { @include media-breakpoint-down(md) { margin-left: 0; diff --git a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue index 07b98b643..8fa28c5fb 100755 --- a/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-simple-select/VuesticSimpleSelect.vue @@ -15,7 +15,8 @@ :name="name" :options="options" > - + + {{ showRequiredError() }} diff --git a/src/vuestic-theme/vuestic-components/vuestic-social-news/VuesticSocialNews.vue b/src/vuestic-theme/vuestic-components/vuestic-social-news/VuesticSocialNews.vue index b381dca14..4303f717d 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-social-news/VuesticSocialNews.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-social-news/VuesticSocialNews.vue @@ -29,15 +29,18 @@ export default { &__text-with-button { padding-bottom: 1.5rem; overflow: hidden; + .text { font-size: $font-size-base; @include va-ellipsis(); } + .btn { margin-left: 1rem; line-height: 1; //TODO: review btn styles } } + &__photo-list { // This hides photos that won't fit. height: 80px; diff --git a/src/vuestic-theme/vuestic-components/vuestic-tabs/VuesticTabs.vue b/src/vuestic-theme/vuestic-components/vuestic-tabs/VuesticTabs.vue index 5c932ae6e..eb477fdb6 100644 --- a/src/vuestic-theme/vuestic-components/vuestic-tabs/VuesticTabs.vue +++ b/src/vuestic-theme/vuestic-components/vuestic-tabs/VuesticTabs.vue @@ -59,27 +59,34 @@ export default {