Skip to content
Snippets Groups Projects
Verified Commit fc7de088 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

feat: new css class monospace #258

parent 64a693bc
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>optimize tree-menu #258</title>
<script src="258.mjs" type="module"></script>
</head>
<body>
<h1>monospace font class #258</h1>
<p></p>
<ul>
<li class="monster-theme-primary-1"><a
href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/258">Issue #258</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<h2>monospace font class</h2>
<div style="display: flex; flex-direction: row; gap: 1rem;">
<span class="">
111111111<br>
000000000<br>
222222222<br>
333333333<br>
444444444<br>
555555555<br>
666666666<br>
777777777<br>
888888888<br>
999999999<br>
</span>
<span class="monospace">
111111111<br>
000000000<br>
222222222<br>
333333333<br>
444444444<br>
555555555<br>
666666666<br>
777777777<br>
888888888<br>
999999999<br>
</span>
<span class="monospace-justify">
111111111<br>
000000000<br>
222222222<br>
333333333<br>
444444444<br>
555555555<br>
666666666<br>
777777777<br>
888888888<br>
999999999<br>
</span>
<span class="monospace-left">
111111111<br>
000000000<br>
222222222<br>
333333333<br>
444444444<br>
555555555<br>
666666666<br>
777777777<br>
888888888<br>
999999999<br>
</span>
</div>
</main>
</body>
</html>
/**
* @file development/issues/open/258.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/258
* @description monospace font is not applied
* @issue 258
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/tree-menu/tree-menu.mjs";
import "../../../source/components/layout/split-panel.mjs";
import "../../../source/components/layout/panel.mjs";
import "../../../source/components/datatable/datasource/dom.mjs";
import "../../../source/components/datatable/datasource/rest.mjs";
......@@ -40,27 +40,27 @@
"author": "schukai GmbH",
"license": "AGPL 3.0",
"dependencies": {
"@floating-ui/dom": "^1.6.11",
"@floating-ui/dom": "^1.6.12",
"@popperjs/core": "^2.11.8"
},
"devDependencies": {
"@biomejs/biome": "1.9.2",
"@esbuild-plugins/node-modules-polyfill": "^0.2.2",
"@peculiar/webcrypto": "^1.5.0",
"@playwright/test": "^1.48.0",
"@playwright/test": "^1.48.2",
"@roarr/cli": "^5.12.4",
"autoprefixer": "^10.4.20",
"browserslist": "^4.24.0",
"browserslist": "^4.24.2",
"btoa": "^1.2.1",
"c8": "^10.1.2",
"chai": "^5.1.1",
"chai": "^5.1.2",
"chai-dom": "^1.12.0",
"crypt": "^0.0.2",
"cssnano": "^7.0.6",
"dom-storage": "^2.1.0",
"element-internals-polyfill": "^1.3.12",
"esbuild": "^0.24.0",
"espree": "^10.2.0",
"espree": "^10.3.0",
"estraverse": "^5.3.0",
"flow-bin": "^0.247.1",
"fs": "0.0.1-security",
......@@ -68,8 +68,8 @@
"graphviz": "^0.0.9",
"jsdom": "^25.0.1",
"jsdom-global": "^3.0.2",
"mocha": "^10.7.3",
"playwright": "^1.48.0",
"mocha": "^10.8.2",
"playwright": "^1.48.2",
"postcss": "^8.4.47",
"postcss-fluid": "^1.4.2",
"postcss-for": "^2.1.1",
......@@ -77,12 +77,12 @@
"postcss-load-config": "^6.0.1",
"postcss-mixins": "^11.0.3",
"postcss-nested": "^6.2.0",
"postcss-nesting": "^13.0.0",
"postcss-nesting": "^13.0.1",
"postcss-normalize": "^13.0.1",
"postcss-responsive-type": "^1.0.0",
"postcss-rtlcss": "^5.5.0",
"postcss-strip-units": "^2.0.1",
"puppeteer": "^23.5.3",
"puppeteer": "^23.7.0",
"sinon": "^19.0.2",
"turbowatch": "^2.29.4",
"url": "^0.11.4",
......@@ -92,7 +92,7 @@
"vite-plugin-banner": "^0.8.0",
"vite-plugin-directory-index": "^3.0.1",
"vite-plugin-list-directory-contents": "^1.4.5",
"vite-plugin-minify": "^2.0.0",
"vite-plugin-minify": "^2.0.1",
"vite-plugin-mock": "^3.0.2",
"vite-plugin-terminal": "^1.2.0",
"ws": "^8.18.0"
......
This diff is collapsed.
......@@ -69,6 +69,9 @@
"Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
"Helvetica Neue", Arial, sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
--monster-font-family-monospace: 'Consolas', 'Courier New', 'Roboto Mono', 'Source Code Pro', 'Fira Mono', monospace;
}
......
This diff is collapsed.
......@@ -43,18 +43,28 @@ p {
/*noinspection ALL*/
@for $i from 1 to 6 {
h$(i) { @mixin h$(i) {} }
.monster-h$(i) {@mixin h$(i) {}}
h$(i) {
@mixin h$(i) {
}
}
.monster-h$(i) {
@mixin h$(i) {
}
}
}
/*noinspection ALL*/
@for $i from 1 to 6 {
p+h$(i) { margin-top: calc(calc(6 - $(i)) * 0.75rem); }
p+h$(i) {
margin-top: calc(calc(6 - $(i)) * 0.75rem);
}
}
/*noinspection ALL*/
@for $i from 1 to 6 {
div+h$(i) { margin-top: 0; }
div+h$(i) {
margin-top: 0;
}
}
/*noinspection CssInvalidPropertyValue*/
......@@ -89,6 +99,8 @@ details {
summary {
cursor: pointer;
font-weight: bold;
letter-spacing: 0.1em;
font-feature-settings: "tnum";
padding: 0.6rem 1rem;
}
......@@ -120,4 +132,10 @@ details[open] > *:last-child {
margin-bottom: 0;
}
.monospace {
font-family: var(--monster-font-family-monospace);
}
......@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { PropertyStyleSheet };
export {PropertyStyleSheet}
/**
* @private
......@@ -22,17 +22,10 @@ export { PropertyStyleSheet };
const PropertyStyleSheet = new CSSStyleSheet();
try {
PropertyStyleSheet.insertRule(
`
PropertyStyleSheet.insertRule(`
@layer property {
}`,
0,
);
}`, 0);
} catch (e) {
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
This diff is collapsed.
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment