ramon
/
skillbox
1
0
Fork 0
Code Issues 1 Pull Requests 1 Packages Projects 1 Releases 1 Wiki Activity

Add new postcss mixin

This commit is contained in:
Ramon Wenger 2024-01-22 16:10:22 +01:00
parent 7374e42b07
commit e2f283ba71
5 changed files with 123 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
client/.postcssrc.json
View File

@ -1,6 +1,7 @@
{
"plugins": {
"postcss-import": {},
"postcss-mixins": {},
"postcss-nested": {},
"postcss-url": {},
"postcss-reuse": {},

114
client/package-lock.json generated
View File

@ -73,6 +73,7 @@
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^15.0.0",
"postcss-mixins": "^9.0.4",
"postcss-nested": "^6.0.1",
"postcss-reuse": "^2.2.0",
"postcss-url": "^10.1.3",
@ -7990,6 +7991,14 @@
"node": ">=6"
}
},
"node_modules/camelcase-css": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
"engines": {
"node": ">= 6"
}
},
"node_modules/caniuse-lite": {
"version": "1.0.30001518",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz",
@ -15307,6 +15316,45 @@
"postcss": "^8.0.0"
}
},
"node_modules/postcss-js": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
"dependencies": {
"camelcase-css": "^2.0.1"
},
"engines": {
"node": "^12 || ^14 || >= 16"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.4.21"
}
},
"node_modules/postcss-mixins": {
"version": "9.0.4",
"resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
"integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
"dependencies": {
"fast-glob": "^3.2.11",
"postcss-js": "^4.0.0",
"postcss-simple-vars": "^7.0.0",
"sugarss": "^4.0.1"
},
"engines": {
"node": ">=14.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.2.14"
}
},
"node_modules/postcss-nested": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@ -15348,6 +15396,21 @@
"node": ">=4"
}
},
"node_modules/postcss-simple-vars": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
"integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
"engines": {
"node": ">=14.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.2.1"
}
},
"node_modules/postcss-url": {
"version": "10.1.3",
"resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
@ -16623,6 +16686,21 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/sugarss": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
"integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
"engines": {
"node": ">=12.0"
},
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/postcss/"
},
"peerDependencies": {
"postcss": "^8.3.3"
}
},
"node_modules/supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@ -23916,6 +23994,11 @@
"resolved": "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz",
"integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg=="
},
"camelcase-css": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
"integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="
},
"caniuse-lite": {
"version": "1.0.30001518",
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001518.tgz",
@ -29149,6 +29232,25 @@
"resolve": "^1.1.7"
}
},
"postcss-js": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.1.tgz",
"integrity": "sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==",
"requires": {
"camelcase-css": "^2.0.1"
}
},
"postcss-mixins": {
"version": "9.0.4",
"resolved": "https://registry.npmjs.org/postcss-mixins/-/postcss-mixins-9.0.4.tgz",
"integrity": "sha512-XVq5jwQJDRu5M1XGkdpgASqLk37OqkH4JCFDXl/Dn7janOJjCTEKL+36cnRVy7bMtoBzALfO7bV7nTIsFnUWLA==",
"requires": {
"fast-glob": "^3.2.11",
"postcss-js": "^4.0.0",
"postcss-simple-vars": "^7.0.0",
"sugarss": "^4.0.1"
}
},
"postcss-nested": {
"version": "6.0.1",
"resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.0.1.tgz",
@ -29174,6 +29276,12 @@
"util-deprecate": "^1.0.2"
}
},
"postcss-simple-vars": {
"version": "7.0.1",
"resolved": "https://registry.npmjs.org/postcss-simple-vars/-/postcss-simple-vars-7.0.1.tgz",
"integrity": "sha512-5GLLXaS8qmzHMOjVxqkk1TZPf1jMqesiI7qLhnlyERalG0sMbHIbJqrcnrpmZdKCLglHnRHoEBB61RtGTsj++A==",
"requires": {}
},
"postcss-url": {
"version": "10.1.3",
"resolved": "https://registry.npmjs.org/postcss-url/-/postcss-url-10.1.3.tgz",
@ -30168,6 +30276,12 @@
"resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
"integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="
},
"sugarss": {
"version": "4.0.1",
"resolved": "https://registry.npmjs.org/sugarss/-/sugarss-4.0.1.tgz",
"integrity": "sha512-WCjS5NfuVJjkQzK10s8WOBY+hhDxxNt/N6ZaGwxFZ+wN3/lKKFSaaKUNecULcTTvE4urLcKaZFQD8vO0mOZujw==",
"requires": {}
},
"supports-color": {
"version": "5.5.0",
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

1
client/package.json
View File

@ -100,6 +100,7 @@
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^15.0.0",
"postcss-mixins": "^9.0.4",
"postcss-nested": "^6.0.1",
"postcss-reuse": "^2.2.0",
"postcss-url": "^10.1.3",

5
client/src/components/highlights/HighlightSidebar.vue
View File

@ -50,7 +50,7 @@ const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vu
</script>
<style scoped lang="postcss">
@custom-media --desktop (min-width: 1200px);
@import 'styles/css/mixins/desktop.css';
.highlight-sidebar {
position: fixed;
@ -70,10 +70,9 @@ const Cross = defineAsyncComponent(() => import('@/components/icons/CrossIcon.vu
grid-template-areas: '. x' 'h h' 'n n';
@media (--desktop) {
@mixin desktop {
width: 300px;
}
&__close-button {
grid-area: x;
}

5
client/src/styles/css/mixins/desktop.css Normal file
View File

@ -0,0 +1,5 @@
@define-mixin desktop {
@media (min-width: 1200px) {
@mixin-content;
}
}