js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 04:09:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

Quick hack to disable zooming in Firefox and Safari

Browse Source
This commit is contained in:
Lea Verou
2024-12-10 14:14:27 -05:00
parent e3fdf61e4a
commit 8e40a082f5
2 changed files with 25 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/viewport-demo/viewport-demo.styles.ts
View File

@@ -85,6 +85,7 @@ export default css`
}
wa-icon {
display: none;
vertical-align: -0.1em;
font-size: 85%;
color: var(--wa-color-gray-70);
@@ -108,15 +109,27 @@ export default css`
color: var(--wa-color-text-quiet);
opacity: 80%;
}
}
[part~='zoom-in'],
[part~='zoom-in']::part(base) {
cursor: zoom-in;
}
[part~='zoom-in'],
[part~='zoom-in']::part(base) {
cursor: zoom-in;
}
[part~='zoom-out'],
[part~='zoom-out']::part(base) {
cursor: zoom-out;
[part~='zoom-out'],
[part~='zoom-out']::part(base) {
cursor: zoom-out;
}
/* Quick hack to disable zooming in Firefox and Safari */
@supports not (interpolate-size: allow-keywords) {
[part~='zoom-in'],
[part~='zoom-out'] {
display: none;
}
wa-icon {
display: inline;
}
}
}
`;

5
src/components/viewport-demo/viewport-demo.ts
View File

@@ -299,7 +299,10 @@ export default class WaViewportDemo extends WebAwesomeElement {
part="zoom-out button"
>-</wa-icon-button
>
<span class="zoom-level"> ${Math.round(this.computedZoom * 100)}%</span>
<span class="zoom-level">
<wa-icon name="magnifying-glass-plus"></wa-icon>
${Math.round(this.computedZoom * 100)}%
</span>
<wa-icon-button
name="square-plus"
variant="regular"