diff --git a/src/package.json b/src/package.json index ca22ce1e..c1d3e146 100644 --- a/src/package.json +++ b/src/package.json @@ -1,37 +1,37 @@ { "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "lint": "eslint --ext .js,.vue resources && stylelint \"resources/sass/*.scss\" \"resources/vue/*.vue\"" }, "devDependencies": { "axios": "^0.19", "bootstrap": "^4.5.0", - "cross-env": "^5.1", + "cross-env": "^6.0", "eslint": "^6.8.0", - "eslint-plugin-vue": "^6.1.1", + "eslint-plugin-vue": "^6.2.2", "@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/free-brands-svg-icons": "^5.12.1", "@fortawesome/free-regular-svg-icons": "^5.12.1", "@fortawesome/free-solid-svg-icons": "^5.12.1", "@fortawesome/vue-fontawesome": "^0.1.9", "jquery": "^3.5.1", - "laravel-mix": "^4.0.7", + "laravel-mix": "^5.0.4", "popper.js": "^1.16.0", "resolve-url-loader": "^2.3.1", - "sass": "^1.15.2", - "sass-loader": "^7.1.0", + "sass": "^1.26.8", + "sass-loader": "^7.3.1", "stylelint": "^12.0.1", - "stylelint-config-standard": "^19.0.0", - "vue": "^2.5.17", - "vue-router": "^3.1.3", + "stylelint-config-standard": "^20.0.0", + "vue": "^2.6.11", + "vue-router": "^3.3.4", "vue-template-compiler": "^2.6.10", - "vuex": "^3.1.1" + "vuex": "^3.4.0" } } diff --git a/src/resources/sass/app.scss b/src/resources/sass/app.scss index 5c327f38..6af13730 100644 --- a/src/resources/sass/app.scss +++ b/src/resources/sass/app.scss @@ -1,278 +1,280 @@ // Fonts // Variables @import 'variables'; // Bootstrap @import '~bootstrap/scss/bootstrap'; @import 'menu'; @import 'toast'; @import 'forms'; html, body, body > .outer-container { height: 100%; } #app { display: flex; flex-direction: column; min-height: 100%; & > nav { flex-shrink: 0; z-index: 12; } & > div.container { flex-grow: 1; margin-top: 2rem; margin-bottom: 2rem; } & > .filler { flex-grow: 1; } & > div.container + .filler { display: none; } } #error-page { position: absolute; top: 0; height: 100%; width: 100%; align-items: center; display: flex; justify-content: center; color: #636b6f; z-index: 10; background: white; .code { text-align: right; border-right: 2px solid; font-size: 26px; padding: 0 15px; } .message { font-size: 18px; padding: 0 15px; } } .app-loader { background-color: $body-bg; height: 100%; width: 100%; position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; z-index: 8; .spinner-border { width: 120px; height: 120px; border-width: 15px; color: #b2aa99; } &.small .spinner-border { width: 25px; height: 25px; border-width: 3px; } } pre { margin: 1rem 0; padding: 1rem; background-color: $menu-bg-color; } .card-title { font-size: 1.2rem; font-weight: bold; } tfoot.table-fake-body { background-color: #f8f8f8; color: grey; text-align: center; td { vertical-align: middle; height: 8em; } tbody:not(:empty) + & { display: none; } } table { td.buttons, td.email, td.price, td.datetime, td.selection { width: 1%; white-space: nowrap; } th.price, td.price { width: 1%; text-align: right; white-space: nowrap; } &.form-list { margin: 0; td { border: 0; &:first-child { padding-left: 0; } &:last-child { padding-right: 0; } } } - .list-details { - min-height: 1em; - - ul { - margin: 0; - padding-left: 1.2em; - } - } - .btn-action { line-height: 1; padding: 0; } } +.list-details { + min-height: 1em; + + & > ul { + margin: 0; + padding-left: 1.2em; + } +} + +.plan-selector { + .plan-ico { + font-size: 3.8rem; + color: #f1a539; + border: 3px solid #f1a539; + width: 6rem; + height: 6rem; + margin-bottom: 1rem; + border-radius: 50%; + } +} + +.plan-description { + & > ul { + padding-left: 1.2em; + + &:last-child { + margin-bottom: 0; + } + } +} + #status-box { background-color: lighten($green, 35); .progress { background-color: #fff; height: 10px; } .progress-label { font-size: 0.9em; } .progress-bar { background-color: $green; } &.process-failed { background-color: lighten($orange, 30); .progress-bar { background-color: $red; } } } #dashboard-nav { display: flex; flex-wrap: wrap; justify-content: center; & > a { padding: 1rem; text-align: center; white-space: nowrap; margin: 0.25rem; text-decoration: none; width: 150px; &.disabled { pointer-events: none; opacity: 0.6; } .badge { position: absolute; top: 0.5rem; right: 0.5rem; } } svg { width: 6rem; height: 6rem; margin: auto; } } -.plan-selector { - .plan-ico { - font-size: 3.8rem; - color: #f1a539; - border: 3px solid #f1a539; - width: 6rem; - height: 6rem; - margin-bottom: 1rem; - border-radius: 50%; - } - - ul { - padding-left: 1.2em; - - &:last-child { - margin-bottom: 0; - } - } -} - .form-separator { position: relative; margin: 1em 0; display: flex; justify-content: center; hr { border-color: #999; margin: 0; position: absolute; - top: .75em; + top: 0.75em; width: 100%; } span { background: #fff; padding: 0 1em; z-index: 1; } } // Bootstrap style fix .btn-link { border: 0; } .table thead th { border: 0; } small { font-size: 0.875em; } diff --git a/src/resources/sass/document.scss b/src/resources/sass/document.scss index 46836373..e873ff91 100644 --- a/src/resources/sass/document.scss +++ b/src/resources/sass/document.scss @@ -1,119 +1,118 @@ // Variables @import 'variables'; @font-face { font-family: 'Roboto'; font-style: normal; font-weight: normal; src: url('../fonts/Roboto-Regular.ttf') format('truetype'); } @font-face { font-family: 'Roboto'; font-style: normal; font-weight: 700; src: url('../fonts/Roboto-Bold.ttf') format('truetype'); } body { font-family: Roboto, sans-serif; margin: 20pt; } a { text-decoration: none; color: $main-color; } h1 { text-align: center; margin: 30pt; font-size: 20pt; } table { width: 100%; &.content { border-spacing: initial; th { padding: 5px; background-color: #f4f4f4; border-top: 1px solid #eee; } td { padding: 5px; border-bottom: 1px solid #eee; } } &.head { margin-bottom: 1em; } - td.idents { white-space: nowrap; width: 1%; text-align: right; vertical-align: top; font-size: 10pt; } .price { width: 150px; text-align: right; white-space: nowrap; } td.logo { width: 1%; } td.description { width: 98%; } tr.total { background-color: #f4f4f4; } tr.vat td, tr.subtotal td { border-bottom: 0; } } #footer { font-size: 10pt; color: gray; text-align: center; padding-top: 5pt; position: absolute; margin: 20pt; bottom: 0; left: 0; right: 0; @media print { margin-bottom: 0; } } .bold { font-weight: bold; } .gray { color: gray; } .align-right { text-align: right; } .align-left { text-align: left; }