Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

use round() in transforms #2064

Merged
merged 7 commits into from
May 24, 2024
Merged

use round() in transforms #2064

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
2a35282
use `round()` in `transform`s
mayank99 May 22, 2024
b26f485
Merge branch 'main' into mayank/rounded-transforms
mayank99 May 23, 2024
ad9fb59
use `@supports` prevent lightningcss from stripping fallback
mayank99 May 23, 2024
9bb540d
also add `@supports` to expandable-block
mayank99 May 23, 2024
62cb963
use `@supports not`
mayank99 May 23, 2024
8937240
changesets
mayank99 May 23, 2024
bd4d642
fix `@supports` syntax
mayank99 May 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .changeset/chilled-pugs-promise-1.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
'@itwin/itwinui-css': patch
---

`transform` values in dialog and expandable-block have been rounded to help avoid blurry text on Windows.

5 changes: 5 additions & 0 deletions .changeset/chilled-pugs-promise-2.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@itwin/itwinui-react': patch
---

Adjusted `Dialog` and `ExpandableBlock` to round some CSS `transform` values. This helps avoid blurry text on Windows in some cases.
12 changes: 9 additions & 3 deletions packages/itwinui-css/src/dialog/dialog.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,9 +66,15 @@ $iui-dialog-min-height: 7.75rem; // 7.75rem = 124px = title bar height + margins
max-block-size: 100dvh;

&:not([data-iui-placement]) {
inset-inline-start: 50%;
inset-block-start: 33%;
transform: translate(-50%, -33%);
@supports not (top: Round(1px, 1px)) {
inset-inline-start: 50%;
inset-block-start: 33%;
transform: translate(-50%, -33%);
}

inset-inline-start: Round(50%, 1px);
inset-block-start: Round(33%, 1px);
transform: translate(Round(-50%, 1px), Round(-33%, 1px));
}

&[data-iui-placement='top-left'] {
Expand Down
5 changes: 4 additions & 1 deletion packages/itwinui-css/src/expandable-block/expandable-block.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,6 +186,9 @@

:where(.iui-expandable-block:not([data-iui-expanded='true'])) & {
opacity: 0;
transform: translateY(-1rem);
@supports not (top: Round(1px, 1px)) {
transform: translateY(-1rem);
}
transform: translateY(Round(-1rem, 1px));
}
}
11 changes: 8 additions & 3 deletions packages/itwinui-css/src/information-panel/information-panel.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,21 +152,27 @@

&.iui-right {
@include iui-information-panel-vertical;
transform: translateX(100%); // hide off screen
box-shadow: -1px 0 10px var(--iui-shadow-color);
clip-path: inset(0 0 0 -15px); // show box-shadow only on the left

&:where(:not(.iui-visible)) {
transform: translateX(100%); // hide off screen
}

> .iui-resizer {
inset-inline-start: calc(var(--iui-size-m) * -0.5);
}
}

&.iui-bottom {
@include iui-information-panel-horizontal;
transform: translateY(100%); // hide off screen
box-shadow: 0 -1px 10px var(--iui-shadow-color);
clip-path: inset(-15px 0 0 0); // show box-shadow only on top

&:where(:not(.iui-visible)) {
transform: translateY(100%); // hide off screen
}

> .iui-resizer {
inset-block-start: calc(var(--iui-size-m) * -0.5);
}
Expand All @@ -175,7 +181,6 @@
&.iui-visible {
opacity: 1;
visibility: visible;
transform: translate(0);

@media (prefers-reduced-motion: no-preference) {
transition:
Expand Down
Loading