move scrollbar styling to @pybricks/ide-docs

This makes the scrollbar flashing less noticeable, but there is still
a bit of a flash in dark mode due to the fact that we are still
injecting the class in the load event in that case.
This commit is contained in:
David Lechner
2021-01-28 12:45:17 -06:00
parent 952416f36b
commit 066a6c7d3d
3 changed files with 5 additions and 52 deletions
+1 -1
View File
@@ -11,7 +11,7 @@
"@blueprintjs/core": "^3.38.1",
"@craco/craco": "^6.0.0",
"@pybricks/firmware": "4.5.0",
"@pybricks/ide-docs": "1.0.0",
"@pybricks/ide-docs": "1.1.0",
"@pybricks/mpy-cross-v5": "^2.0.0",
"@shopify/react-i18n": "^5.2.1",
"@testing-library/dom": "^7.29.2",
-47
View File
@@ -145,53 +145,6 @@ function App(): JSX.Element {
}
});
const style = document.createElement('style');
// TODO: how to get these programmatically from values set in variables.scss?
const iconColor = '#5c7080';
const iconColorHover = '#182026';
const appBackgroundColor = '#e8e8e8';
const darkIconColor = '#a7b6c2';
const darkIconColorHover = '#f5f8fa';
const darkAppBackgroundColor = '#293742';
// This is scrollbar style coped from index.scss.
style.innerText = `
::-webkit-scrollbar {
width: 16px;
}
.${Classes.DARK} ::-webkit-scrollbar-track {
background: ${darkAppBackgroundColor};
}
::-webkit-scrollbar-track {
background: ${appBackgroundColor};
}
.${Classes.DARK} ::-webkit-scrollbar-thumb {
border-color: ${darkAppBackgroundColor};
background: ${darkIconColor};
}
::-webkit-scrollbar-thumb {
border-width: 3px;
border-style: solid;
border-radius: 8px;
border-color: ${appBackgroundColor};
background: ${iconColor};
}
.${Classes.DARK} ::-webkit-scrollbar-thumb:hover {
background: ${darkIconColorHover};
}
::-webkit-scrollbar-thumb:hover {
background: ${iconColorHover};
}
`;
contentWindow.document.head.appendChild(style);
if (document.body.classList.contains(Classes.DARK)) {
contentWindow.document.documentElement.classList.add(
Classes.DARK,
+4 -4
View File
@@ -1462,10 +1462,10 @@
dependencies:
jszip "^3.5.0"
"@pybricks/ide-docs@1.0.0":
version "1.0.0"
resolved "https://registry.yarnpkg.com/@pybricks/ide-docs/-/ide-docs-1.0.0.tgz#e93ff78c65730bbdd26b9deaf3110799d46de8e6"
integrity sha512-pe52fHG3S2QIx7RLX8+a+5oQo5A/svR2bxJWWImwZ2unAbPYmZ2G/25zgtYb9JF4Fec2f9mLT2zRiGqUjiCjiw==
"@pybricks/ide-docs@1.1.0":
version "1.1.0"
resolved "https://registry.yarnpkg.com/@pybricks/ide-docs/-/ide-docs-1.1.0.tgz#15c46def964ad8e92805bc3746a1d418d145e5c4"
integrity sha512-NwEPoAnMSvNShtzXSSuf+zOf3COPzXb0DQiD7RV6p3edCPvcgZn53JZvZscXdyudAruOMHZciw/jW8X4dJee2g==
"@pybricks/mpy-cross-v5@^2.0.0":
version "2.0.0"