Skip to content

Commit

Permalink
Docs(web): Fix Sass implementation notes
Browse files Browse the repository at this point in the history
  • Loading branch information
adamkudrna committed Feb 13, 2024
1 parent b7c145f commit e5ba996
Show file tree
Hide file tree
Showing 3 changed files with 7 additions and 7 deletions.
4 changes: 2 additions & 2 deletions packages/web-react/src/components/Modal/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -318,8 +318,8 @@ content is longer than user's viewport.
#### ⚠️ DEPRECATION NOTICE
The `isScrollable` prop will be set to `false` by default in the next major release and the ModalDialog will be made
non-scrollable by default. It will be possible to re-enable the inside scrolling by setting the
`isScrollable` boolean prop.
non-scrollable by default. It will be possible to re-enable the inside scrolling by setting the `isScrollable` prop to
`true` explicitly.
## Stacking Modals
Expand Down
4 changes: 2 additions & 2 deletions packages/web-twig/src/Resources/components/Modal/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -323,8 +323,8 @@ content is longer than user's viewport.
#### ⚠️ DEPRECATION NOTICE

The `isScrollable` prop will be set to `false` by default in the next major release and the ModalDialog will be made
non-scrollable by default. It will be possible to re-enable the inside scrolling by setting the
`isScrollable` prop to `true` explicitly.
non-scrollable by default. It will be possible to re-enable the inside scrolling by setting the `isScrollable` prop to
`true` explicitly.

## Stacking Modals

Expand Down
6 changes: 3 additions & 3 deletions packages/web/src/scss/components/Modal/_Modal.scss
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
// 1. In order to be transitioned, the visibility of the dialog is controlled through `opacity` and `visibility`
// properties instead of the default `display`.
// 2. Simply use Modal background color instead of `::backdrop` to make fading possible. (A pseudo-element cannot be
// used because it covers the scrollbar of the ModalDialog with the inside scrolling turned off.)
// 3. Use background gradient to prevent background from flickering in Safari.
// used because it covers the scrollbar of the ModalDialog when the inside is scrolling turned off.)
// 3. Use background gradient to prevent background from flickering during transition in Safari.
// 4. Clip overflow during transition of the docked variant on mobile screens.
// 5. Allow scrolling through the modal. Has no effect unless the modal is taller than the viewport.
// 6. Restore text selection after `all: unset`.
Expand All @@ -21,7 +21,7 @@
display: flex; // 1.
padding-block: theme.$padding-y;
overflow: hidden; // 4.
background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color}); // 8.
background: linear-gradient(#{theme.$backdrop-background-color}, #{theme.$backdrop-background-color}); // 2., 3.
visibility: hidden; // 1.
opacity: 0; // 1.
pointer-events: none; // 1.
Expand Down

0 comments on commit e5ba996

Please sign in to comment.