diff --git a/client/.stylelintrc.cjs b/client/.stylelintrc.cjs new file mode 100644 index 0000000..fe00717 --- /dev/null +++ b/client/.stylelintrc.cjs @@ -0,0 +1,35 @@ +const ruleOrder = [ + { type: 'at-rule', name: 'import' }, + { type: 'at-rule', name: 'forward' }, + { type: 'at-rule', name: 'use' }, + 'dollar-variables', + 'at-variables', + 'custom-properties', + { type: 'at-rule', name: 'custom-media' }, + { type: 'at-rule', name: 'function' }, + { type: 'at-rule', name: 'mixin' }, + { type: 'at-rule', name: 'extend' }, + 'declarations', + { + type: 'rule', + selector: /^&::[\w-]+/, + hasBlock: true, + }, + 'rules', + { type: 'at-rule', name: 'mixin', parameter: /^responsive.*/ }, + { type: 'at-rule', name: 'media', hasBlock: true }, +]; + +module.exports = { + extends: ['stylelint-config-standard-scss', 'stylelint-config-clean-order'], + rules: { + 'selector-class-pattern': null, + 'scss/load-partial-extension': 'always', + 'order/order': [ + ruleOrder, + { + severity: 'warning', + }, + ], + }, +}; diff --git a/client/.stylelintrc.json b/client/.stylelintrc.json deleted file mode 100644 index d3e9288..0000000 --- a/client/.stylelintrc.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "extends": ["stylelint-config-standard-scss", "stylelint-config-clean-order"], - "rules": { - "selector-class-pattern": null, - "scss/load-partial-extension": "always" - } -} diff --git a/client/package-lock.json b/client/package-lock.json index 569fbe1..043e043 100644 --- a/client/package-lock.json +++ b/client/package-lock.json @@ -4777,11 +4777,11 @@ } }, "node_modules/axios": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz", - "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==", + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", "dependencies": { - "follow-redirects": "^1.15.0", + "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } @@ -7887,9 +7887,9 @@ } }, "node_modules/follow-redirects": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", - "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==", + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==", "funding": [ { "type": "individual", @@ -16133,9 +16133,9 @@ } }, "node_modules/webpack-dev-middleware": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz", - "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz", + "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==", "dev": true, "dependencies": { "colorette": "^2.0.10", @@ -16220,9 +16220,9 @@ } }, "node_modules/webpack-dev-server/node_modules/ws": { - "version": "8.14.2", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", - "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "dev": true, "engines": { "node": ">=10.0.0" @@ -19692,11 +19692,11 @@ "dev": true }, "axios": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz", - "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==", + "version": "1.7.2", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.2.tgz", + "integrity": "sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw==", "requires": { - "follow-redirects": "^1.15.0", + "follow-redirects": "^1.15.6", "form-data": "^4.0.0", "proxy-from-env": "^1.1.0" } @@ -21971,9 +21971,9 @@ } }, "follow-redirects": { - "version": "1.15.3", - "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz", - "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==" + "version": "1.15.6", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz", + "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==" }, "for-each": { "version": "0.3.3", @@ -27628,9 +27628,9 @@ } }, "webpack-dev-middleware": { - "version": "5.3.3", - "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.3.tgz", - "integrity": "sha512-hj5CYrY0bZLB+eTO+x/j67Pkrquiy7kWepMHmUMoPsmcUaeEnQJqFzHJOyxgWlq746/wUuA64p9ta34Kyb01pA==", + "version": "5.3.4", + "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz", + "integrity": "sha512-BVdTqhhs+0IfoeAf7EoH5WE+exCmqGerHfDM0IL096Px60Tq2Mn9MAbnaGUe6HiMa41KMCYF19gyzZmBcq/o4Q==", "dev": true, "requires": { "colorette": "^2.0.10", @@ -27684,9 +27684,9 @@ "dev": true }, "ws": { - "version": "8.14.2", - "resolved": "https://registry.npmjs.org/ws/-/ws-8.14.2.tgz", - "integrity": "sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==", + "version": "8.18.0", + "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz", + "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==", "dev": true, "requires": {} } diff --git a/client/src/assets/css/module/app-header.scss b/client/src/assets/css/module/app-header.scss index 80fd44d..6529b7e 100644 --- a/client/src/assets/css/module/app-header.scss +++ b/client/src/assets/css/module/app-header.scss @@ -1,8 +1,4 @@ .header { - @mixin responsive-l { - top: 0; - } - position: sticky; z-index: 11; top: -30px; @@ -12,14 +8,14 @@ backdrop-filter: blur(100px); &__wrapper { - @mixin responsive-l { - padding: 10px 20px; - } - display: flex; align-items: center; width: 100%; padding: 40px 20px 10px; + + @mixin responsive-l { + padding: 10px 20px; + } } &__logo { @@ -29,12 +25,12 @@ margin-right: auto; &.m--menu { + display: none; + margin-bottom: var(--space-between-block); + @mixin responsive-l { display: block; } - - display: none; - margin-bottom: var(--space-between-block); } &:hover { @@ -43,37 +39,17 @@ } &__menu { - @mixin responsive-xl { - gap: 20px; - } - - @mixin responsive-l { - position: fixed; - z-index: 10; - top: 0; - bottom: 0; - left: 0; - transform: translateX(-100%); - - flex-direction: column; - align-items: start; - - width: 320px; - min-height: calc(100vh + 30px); - padding: 40px 20px 0; - - background: var(--color-black); - - &.m--active { - transform: translateX(0); - } - } - display: flex; align-items: center; transition: transform 0.3s ease; &-item { + margin: 0 25px; + + &.m--tools { + margin: 0 10px 0 25px; + } + @mixin responsive-xl { margin: 0 10px; @@ -84,12 +60,6 @@ @mixin responsive-l { } - - margin: 0 25px; - - &.m--tools { - margin: 0 10px 0 25px; - } } &-link { @@ -129,6 +99,32 @@ } } } + + @mixin responsive-xl { + gap: 20px; + } + + @mixin responsive-l { + position: fixed; + z-index: 10; + top: 0; + bottom: 0; + left: 0; + transform: translateX(-100%); + + flex-direction: column; + align-items: start; + + width: 320px; + min-height: calc(100vh + 30px); + padding: 40px 20px 0; + + background: var(--color-black); + + &.m--active { + transform: translateX(0); + } + } } &__btn { @@ -139,10 +135,6 @@ } &__burger { - @mixin responsive-l { - display: block; - } - position: relative; display: none; width: 38px; @@ -201,5 +193,13 @@ span { top: 10px; } + + @mixin responsive-l { + display: block; + } + } + + @mixin responsive-l { + top: 0; } } diff --git a/client/src/boot/main.js b/client/src/boot/main.js index 50fa759..fd3ef9d 100644 --- a/client/src/boot/main.js +++ b/client/src/boot/main.js @@ -7,6 +7,8 @@ import { plugin, defaultConfig, createInput } from '@formkit/vue'; import { ru } from '@formkit/i18n'; import maskaInput from '@/components/inputs/maska-input'; import toggle from '@/components/inputs/toggle'; +import { rules } from 'stylelint-config-clean-order'; +console.log(rules); import { vMaska } from 'maska';